You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1366 lines
40 KiB
1366 lines
40 KiB
[data-words] {
|
|
--_words-gap: var(--words-gap-md);
|
|
--_words-radius: var(--words-radius-md);
|
|
--_words-content-px: var(--words-content-px-md);
|
|
--_words-content-py: var(--words-content-py-md);
|
|
--_words-content-min-block-size: var(--words-content-min-block-size-md);
|
|
--_words-toolbar-px: var(--words-toolbar-px-md);
|
|
--_words-toolbar-py: var(--words-toolbar-py-md);
|
|
--_words-button-size: var(--words-button-size-md);
|
|
--_words-font-size: var(--words-font-size-md);
|
|
/* `--_words-accent-*` is TSC-emitted from `lib/recipes/base.ts > words._accent-*`. */
|
|
--_words-selection-bg: color-mix(in srgb, var(--_words-accent-solid) 78%, transparent);
|
|
--_words-selection-color: var(--words-selection-color);
|
|
--_words-check-size: calc(var(--_words-button-size) * 0.46);
|
|
--_words-check-mark-width: calc(var(--_words-check-size) * 0.32);
|
|
--_words-check-mark-height: calc(var(--_words-check-size) * 0.56);
|
|
--_words-check-mark-stroke: var(--words-border-width);
|
|
--_words-check-mark-offset: calc(var(--_words-check-size) * -0.05);
|
|
--toolbar-gap-md: var(--words-toolbar-gap);
|
|
--toolbar-padding-inline-sm: var(--_words-toolbar-px);
|
|
--toolbar-padding-inline-md: var(--_words-toolbar-px);
|
|
--toolbar-padding-block-sm: var(--_words-toolbar-py);
|
|
--toolbar-padding-block-md: var(--_words-toolbar-py);
|
|
--toolbar-control-height-sm: var(--_words-button-size);
|
|
--toolbar-control-height-md: var(--_words-button-size);
|
|
--toolbar-control-px-sm: var(--words-command-px);
|
|
--toolbar-control-px-md: var(--words-command-px);
|
|
--toolbar-control-gap-sm: var(--words-command-gap);
|
|
--toolbar-control-gap-md: var(--words-command-gap);
|
|
--toolbar-font-size-sm: var(--_words-font-size);
|
|
--toolbar-font-size-md: var(--_words-font-size);
|
|
--toolbar-bg: var(--words-toolbar-bg);
|
|
--toolbar-border: transparent;
|
|
--toolbar-shadow: none;
|
|
--toolbar-color: var(--words-command-color);
|
|
--toolbar-font-family: var(--words-font-family);
|
|
--toolbar-line-height: var(--words-line-height);
|
|
--toolbar-group-gap: var(--words-command-gap);
|
|
--toolbar-control-border-width: var(--words-border-width);
|
|
--toolbar-control-border: transparent;
|
|
--toolbar-control-radius: var(--words-command-radius);
|
|
--toolbar-control-bg: transparent;
|
|
--toolbar-control-color: var(--words-command-color);
|
|
--toolbar-control-border-hover: var(--words-command-border-hover);
|
|
--toolbar-control-bg-hover: var(--words-command-bg-hover);
|
|
--toolbar-control-color-hover: var(--words-command-color-hover);
|
|
--toolbar-control-border-active: var(--_words-accent-border);
|
|
--toolbar-control-bg-active: var(--_words-accent-track);
|
|
--toolbar-control-color-active: var(--_words-accent-text);
|
|
--toolbar-focus-shadow: var(--words-focus-shadow);
|
|
--toolbar-disabled-opacity: var(--words-disabled-opacity);
|
|
--toolbar-transition-duration: var(--words-transition-duration);
|
|
--toolbar-transition-ease: var(--words-transition-ease);
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
inline-size: 100%;
|
|
max-inline-size: var(--words-max-inline-size);
|
|
overflow: hidden;
|
|
border: var(--words-border-width) solid var(--words-border);
|
|
border-radius: var(--_words-radius);
|
|
background: var(--words-bg);
|
|
box-shadow: var(--words-shadow);
|
|
color: var(--words-color);
|
|
font-family: var(--words-font-family);
|
|
font-size: var(--_words-font-size);
|
|
line-height: var(--words-line-height);
|
|
transition:
|
|
border-color var(--words-transition-duration) var(--words-transition-ease),
|
|
box-shadow var(--words-transition-duration) var(--words-transition-ease),
|
|
background var(--words-transition-duration) var(--words-transition-ease);
|
|
}
|
|
|
|
[data-words][data-size='sm'] {
|
|
--_words-gap: var(--words-gap-sm);
|
|
--_words-radius: var(--words-radius-sm);
|
|
--_words-content-px: var(--words-content-px-sm);
|
|
--_words-content-py: var(--words-content-py-sm);
|
|
--_words-content-min-block-size: var(--words-content-min-block-size-sm);
|
|
--_words-toolbar-px: var(--words-toolbar-px-sm);
|
|
--_words-toolbar-py: var(--words-toolbar-py-sm);
|
|
--_words-button-size: var(--words-button-size-sm);
|
|
--_words-font-size: var(--words-font-size-sm);
|
|
}
|
|
|
|
[data-words][data-size='lg'] {
|
|
--_words-gap: var(--words-gap-lg);
|
|
--_words-radius: var(--words-radius-lg);
|
|
--_words-content-px: var(--words-content-px-lg);
|
|
--_words-content-py: var(--words-content-py-lg);
|
|
--_words-content-min-block-size: var(--words-content-min-block-size-lg);
|
|
--_words-toolbar-px: var(--words-toolbar-px-lg);
|
|
--_words-toolbar-py: var(--words-toolbar-py-lg);
|
|
--_words-button-size: var(--words-button-size-lg);
|
|
--_words-font-size: var(--words-font-size-lg);
|
|
}
|
|
|
|
[data-words][data-variant='outline'] {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-words][data-variant='ghost'] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-words]:hover:not([data-disabled]):not([data-readonly]) {
|
|
border-color: var(--words-border-hover);
|
|
}
|
|
|
|
[data-words][data-focused] {
|
|
border-color: var(--_words-accent-border);
|
|
box-shadow: var(--words-focus-shadow);
|
|
}
|
|
|
|
[data-words][data-invalid] {
|
|
border-color: var(--words-invalid-border);
|
|
}
|
|
|
|
[data-words][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) {
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
grid-template-rows: auto auto;
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-find-replace]) {
|
|
grid-template-rows: auto auto auto;
|
|
}
|
|
|
|
[data-words-toolbar] {
|
|
/* Horizontal layout: single row with horizontal scroll on narrow
|
|
viewports. Was previously `flex-wrap: wrap` which produced 2-3
|
|
line wraps on mobile with orphan icons. The horizontal-scroll
|
|
pattern is what Google Docs / Word / Notion use on mobile and
|
|
keeps every command reachable without changing the markup. */
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--words-toolbar-gap);
|
|
inline-size: 100%;
|
|
padding-block: var(--_words-toolbar-py);
|
|
padding-inline: var(--_words-toolbar-px);
|
|
border: 0;
|
|
border-block-end: var(--words-border-width) solid var(--words-toolbar-border);
|
|
border-radius: 0;
|
|
background: var(--words-toolbar-bg);
|
|
box-shadow: none;
|
|
overflow-x: auto;
|
|
overflow-y: clip;
|
|
scrollbar-width: thin;
|
|
/* Mask a soft fade on the trailing edge when content overflows so
|
|
the user has a visual cue there's more. The fade lives in a
|
|
mask-image rather than a real element to keep markup unchanged. */
|
|
mask-image: linear-gradient(
|
|
to inline-end,
|
|
black calc(100% - 1.5rem),
|
|
transparent
|
|
);
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* Drop the fade when the toolbar isn't actually overflowing — there's
|
|
no JS hook for that so we approximate with a min-inline-size sentinel:
|
|
if the toolbar's intrinsic content fits, the mask still applies but
|
|
is harmless (it fades empty space). Keeping for simplicity. */
|
|
|
|
[data-words-toolbar][data-orientation='vertical'] {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-items: stretch;
|
|
inline-size: max-content;
|
|
border-block-end: 0;
|
|
border-inline-end: var(--words-border-width) solid var(--words-toolbar-border);
|
|
overflow-x: visible;
|
|
overflow-y: auto;
|
|
mask-image: none;
|
|
}
|
|
|
|
[data-words-toolbar-group] {
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
min-inline-size: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-words-toolbar-group][data-orientation='vertical'] {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-items: stretch;
|
|
}
|
|
|
|
[data-words-bubble-menu] {
|
|
--_words-bubble-offset: var(--words-toolbar-py-md);
|
|
--_words-bubble-y-shift: calc(-100% - var(--_words-bubble-offset));
|
|
--_words-bubble-bg: var(--words-toolbar-bg);
|
|
|
|
position: fixed;
|
|
z-index: var(--z-index-popover);
|
|
inset-block-start: var(--_words-bubble-y);
|
|
inset-inline-start: var(--_words-bubble-x);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
max-inline-size: 92vw;
|
|
padding-block: var(--words-toolbar-py-sm);
|
|
padding-inline: var(--words-toolbar-px-sm);
|
|
border: var(--words-border-width) solid var(--_words-accent-border);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--_words-bubble-bg);
|
|
box-shadow: var(--words-shadow);
|
|
color: var(--words-command-color);
|
|
transform: translate(-50%, var(--_words-bubble-y-shift));
|
|
}
|
|
|
|
[data-words-bubble-menu][data-side='bottom'] {
|
|
--_words-bubble-y-shift: var(--_words-bubble-offset);
|
|
}
|
|
|
|
[data-words-bubble-menu][hidden],
|
|
[data-words-bubble-menu]:not([data-open]),
|
|
[data-words-bubble-menu]:not([data-positioned]) {
|
|
display: none;
|
|
}
|
|
|
|
[data-words-bubble-menu] [data-words-link-editor] {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
[data-words-slash-menu] {
|
|
position: fixed;
|
|
z-index: var(--z-index-popover);
|
|
inset-block-start: var(--_words-slash-y);
|
|
inset-inline-start: var(--_words-slash-x);
|
|
display: grid;
|
|
gap: var(--button-gap-xs);
|
|
inline-size: min(calc(var(--_words-button-size) * 7), 92vw);
|
|
max-block-size: min(calc(var(--_words-button-size) * 10), 70vh);
|
|
overflow: auto;
|
|
padding: var(--words-toolbar-py-sm);
|
|
border: var(--words-border-width) solid var(--_words-accent-border);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-toolbar-bg);
|
|
box-shadow: var(--words-shadow);
|
|
color: var(--words-command-color);
|
|
transform: translateY(var(--words-toolbar-py-sm));
|
|
}
|
|
|
|
[data-words-slash-menu][hidden],
|
|
[data-words-slash-menu]:not([data-open]) {
|
|
display: none;
|
|
}
|
|
|
|
[data-words-slash-option] {
|
|
display: grid;
|
|
grid-template-columns: var(--_words-button-size) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
padding-block: var(--button-gap-xs);
|
|
padding-inline: var(--words-command-px);
|
|
border: var(--words-border-width) solid transparent;
|
|
border-radius: var(--words-command-radius);
|
|
background: transparent;
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-words-slash-option]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-slash-option][data-active] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-slash-option]:focus-visible {
|
|
box-shadow: var(--words-focus-shadow);
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-slash-option]:disabled,
|
|
[data-words-slash-option][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-slash-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
color: inherit;
|
|
}
|
|
|
|
[data-words-slash-copy] {
|
|
display: grid;
|
|
gap: var(--words-code-py);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-words-slash-label],
|
|
[data-words-slash-description] {
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-words-slash-label] {
|
|
color: inherit;
|
|
font-weight: var(--words-strong-font-weight);
|
|
}
|
|
|
|
[data-words-slash-description] {
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words-slash-option][data-active] [data-words-slash-description] {
|
|
color: inherit;
|
|
}
|
|
|
|
[data-words-command-button] {
|
|
min-inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
}
|
|
|
|
[data-words-command-button][data-command] {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
inline-size: auto;
|
|
border-color: var(--_button-border);
|
|
border-radius: var(--_button-radius);
|
|
background: var(--_button-bg);
|
|
box-shadow: var(--button-shadow);
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-words-command-button][data-active],
|
|
[data-words-command-button][data-state='on'] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-command-button][data-command='commit'] {
|
|
border-color: var(--_words-accent-solid);
|
|
background: var(--_words-accent-solid);
|
|
color: var(--words-command-solid-color);
|
|
}
|
|
|
|
[data-words-command-button][data-command='commit']:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--_words-accent-solid-hover);
|
|
background: var(--_words-accent-solid-hover);
|
|
color: var(--words-command-solid-color);
|
|
}
|
|
|
|
[data-words-command-button]:disabled,
|
|
[data-words-command-button][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-floating] {
|
|
--_words-toolbar-px: var(--words-toolbar-px-md);
|
|
--_words-toolbar-py: var(--words-toolbar-py-md);
|
|
--_words-button-size: var(--button-height-xs);
|
|
--_words-font-size: var(--words-font-size-md);
|
|
--_words-accent-solid: var(--words-primary-solid);
|
|
--_words-accent-solid-hover: var(--words-primary-solid-hover);
|
|
--_words-accent-track: var(--words-primary-track);
|
|
--_words-accent-border: var(--words-primary-border);
|
|
--_words-accent-text: var(--words-primary-text);
|
|
--toolbar-focus-shadow: var(--words-focus-shadow);
|
|
--toolbar-disabled-opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-link-editor] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
[data-words-link-editor][data-invalid] {
|
|
background: color-mix(in srgb, var(--words-invalid-border) 8%, var(--words-toolbar-bg));
|
|
}
|
|
|
|
[data-words-link-editor][data-disabled] {
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-heading-picker] {
|
|
min-inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
}
|
|
|
|
[data-words-toolbar-family] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--words-code-py);
|
|
min-inline-size: calc(var(--_words-button-size) + 1rem);
|
|
block-size: var(--_words-button-size);
|
|
padding-inline: var(--button-gap-xs);
|
|
border: var(--words-border-width) solid transparent;
|
|
border-radius: var(--words-command-radius);
|
|
background: transparent;
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-words-toolbar-family]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-toolbar-family][data-active],
|
|
[data-words-toolbar-family][data-state='open'] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-toolbar-family]:disabled,
|
|
[data-words-toolbar-family][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-code-language-picker] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--words-command-gap);
|
|
min-inline-size: calc(var(--_words-button-size) + 3ch);
|
|
block-size: var(--_words-button-size);
|
|
padding-inline: var(--button-gap-xs);
|
|
border: var(--words-border-width) solid transparent;
|
|
border-radius: var(--words-command-radius);
|
|
background: transparent;
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-words-code-language-picker]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-code-language-picker][data-active] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-code-language-picker]:disabled,
|
|
[data-words-code-language-picker][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-code-language-value] {
|
|
min-inline-size: 2.5ch;
|
|
font-size: var(--words-status-font-size);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: start;
|
|
}
|
|
|
|
[data-words-find-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: flex-start;
|
|
inline-size: var(--_words-button-size);
|
|
min-inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
padding: 0;
|
|
border: var(--words-border-width) solid transparent;
|
|
border-radius: var(--words-command-radius);
|
|
background: transparent;
|
|
color: var(--words-command-color);
|
|
}
|
|
|
|
[data-words-find-trigger]:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--words-command-border-hover);
|
|
background: var(--words-command-bg-hover);
|
|
color: var(--words-command-color-hover);
|
|
}
|
|
|
|
[data-words] > [data-words-find-trigger] {
|
|
margin-block-start: var(--_words-toolbar-py);
|
|
margin-inline-start: var(--_words-toolbar-px);
|
|
}
|
|
|
|
[data-words-find-trigger][data-state='open'],
|
|
[data-words-find-trigger][data-has-matches] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-heading-picker-panel] {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, var(--_words-button-size));
|
|
gap: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-heading-picker-panel] [data-words-command-button] {
|
|
inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
justify-self: stretch;
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] {
|
|
display: grid;
|
|
gap: var(--button-gap-xs);
|
|
inline-size: min(12.5rem, calc(100vw - var(--space-4)));
|
|
max-inline-size: calc(100vw - var(--space-4));
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] {
|
|
inline-size: min(18rem, calc(100vw - var(--space-4)));
|
|
gap: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] [data-toolbar-button],
|
|
[data-words-toolbar-family-panel] [data-words-command-button],
|
|
[data-words-toolbar-family-panel] [data-words-code-language-picker],
|
|
[data-words-toolbar-family-panel] [data-words-find-trigger] {
|
|
justify-content: flex-start;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] [data-words-command-button] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] [data-words-command-button] .eidos-button-body {
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-words-command-button] {
|
|
min-block-size: calc(var(--_words-button-size) * 1.08);
|
|
block-size: calc(var(--_words-button-size) * 1.08);
|
|
padding-inline: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table']
|
|
[data-words-command-button]
|
|
.eidos-button-body {
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-muted'] {
|
|
background: color-mix(in srgb, var(--words-toolbar-bg) 86%, transparent);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-accent'] {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 14%, var(--words-bg));
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-default'] {
|
|
background: var(--words-bg);
|
|
}
|
|
|
|
[data-words-toolbar-family-section] {
|
|
display: grid;
|
|
gap: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-section] {
|
|
gap: var(--words-code-py);
|
|
}
|
|
|
|
[data-words-toolbar-family-section] + [data-words-toolbar-family-section] {
|
|
padding-block-start: var(--button-gap-xs);
|
|
border-block-start: var(--words-border-width) solid var(--words-toolbar-border);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table']
|
|
[data-words-toolbar-family-section]
|
|
+ [data-words-toolbar-family-section] {
|
|
padding-block-start: var(--words-code-py);
|
|
}
|
|
|
|
[data-words-toolbar-family-label] {
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
font-weight: var(--words-strong-font-weight);
|
|
line-height: var(--words-line-height);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-label] {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
[data-words-toolbar-family-grid] {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel][data-family='table'] [data-words-toolbar-family-grid] {
|
|
gap: var(--words-code-py);
|
|
}
|
|
|
|
[data-words-toolbar-family-grid][data-columns='1'] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
[data-words-toolbar-family-grid][data-columns='3'] {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
[data-words-toolbar-family-grid][data-columns='4'] {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] [data-words-code-language-picker],
|
|
[data-words-toolbar-family-panel] [data-words-find-trigger] {
|
|
padding-inline: var(--words-command-px);
|
|
}
|
|
|
|
[data-words-toolbar-family-panel] [data-words-code-language-value] {
|
|
min-inline-size: auto;
|
|
}
|
|
|
|
[data-words-code-language-panel] {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(8rem, 1fr));
|
|
gap: var(--button-gap-xs);
|
|
}
|
|
|
|
[data-words-code-language-option] {
|
|
display: grid;
|
|
grid-template-columns: 3.5rem minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
min-inline-size: 0;
|
|
block-size: var(--_words-button-size);
|
|
padding-inline: var(--words-command-px);
|
|
border: var(--words-border-width) solid var(--words-command-border-hover);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
text-align: start;
|
|
}
|
|
|
|
[data-words-code-language-option]:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--words-command-border-hover);
|
|
background: var(--words-command-bg-hover);
|
|
color: var(--words-command-color-hover);
|
|
}
|
|
|
|
[data-words-code-language-option]:focus-visible {
|
|
box-shadow: var(--words-focus-shadow);
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-code-language-option][data-active] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-code-language-code] {
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
font-variant-numeric: tabular-nums;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
[data-words-code-language-label] {
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-words-link-field] {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
block-size: var(--_words-button-size);
|
|
padding-inline: var(--words-command-px);
|
|
border: var(--words-border-width) solid var(--words-toolbar-border);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-content-color);
|
|
}
|
|
|
|
[data-words-link-label] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words-link-field] input[type='text'] {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--words-content-color);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-link-field]:focus-within {
|
|
border-color: var(--_words-accent-border);
|
|
box-shadow: var(--words-focus-shadow);
|
|
}
|
|
|
|
[data-words-link-field]:has(input[aria-invalid='true']) {
|
|
border-color: var(--words-invalid-border);
|
|
}
|
|
|
|
[data-words-link-actions] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
}
|
|
|
|
[data-words-link-actions] button {
|
|
display: inline-flex;
|
|
flex: 0 0 var(--_words-button-size);
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
padding: 0;
|
|
border: var(--words-border-width) solid var(--words-command-border-hover);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-words-link-actions] button[data-words-link-apply] {
|
|
border-color: var(--_words-accent-solid);
|
|
background: var(--_words-accent-solid);
|
|
color: var(--words-command-solid-color);
|
|
}
|
|
|
|
[data-words-link-actions] button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-link-error] {
|
|
grid-column: 1 / -1;
|
|
color: var(--words-status-error-color);
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-link-editor] {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-link-editor])
|
|
[data-words-status] {
|
|
grid-row: 3;
|
|
}
|
|
|
|
[data-words-placeholder] {
|
|
display: block;
|
|
padding-block-start: var(--_words-content-py);
|
|
padding-inline: var(--_words-content-px);
|
|
color: var(--words-placeholder-color);
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-placeholder] {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
[data-words-placeholder][hidden],
|
|
[data-words-hidden-input][hidden] {
|
|
display: none;
|
|
}
|
|
|
|
[data-words-content] {
|
|
min-block-size: var(--_words-content-min-block-size);
|
|
padding-block: var(--_words-content-py);
|
|
padding-inline: var(--_words-content-px);
|
|
color: var(--words-content-color);
|
|
outline: none;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
caret-color: var(--_words-accent-solid);
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
|
|
[data-words-content] * {
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-content] {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
[data-words-placeholder]:not([hidden]) + [data-words-content] {
|
|
padding-block-start: var(--words-content-py-after-placeholder);
|
|
}
|
|
|
|
[data-words-content]::selection,
|
|
[data-words-content] ::selection {
|
|
background: var(--_words-selection-bg);
|
|
color: var(--_words-selection-color);
|
|
}
|
|
|
|
[data-words-content]:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-content] :where(p, h1, h2, h3, blockquote, pre, ul, ol, table) {
|
|
margin-block: 0 var(--words-block-gap);
|
|
}
|
|
|
|
[data-words-content] :where(p, h1, h2, h3, blockquote, pre, ul, ol, table):last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
[data-words-content] :where(h1, h2, h3) {
|
|
color: var(--words-heading-color);
|
|
font-size: var(--words-heading-font-size);
|
|
font-weight: var(--words-heading-font-weight);
|
|
line-height: var(--words-heading-line-height);
|
|
}
|
|
|
|
[data-words-content] :where(h1) {
|
|
font-size: var(--words-heading-h1-font-size);
|
|
}
|
|
|
|
[data-words-content] :where(h2) {
|
|
font-size: var(--words-heading-h2-font-size);
|
|
}
|
|
|
|
[data-words-content] :where(h3) {
|
|
font-size: var(--words-heading-h3-font-size);
|
|
}
|
|
|
|
[data-words-content] :where(strong) {
|
|
font-weight: var(--words-strong-font-weight);
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='bold'] {
|
|
font-weight: var(--words-strong-font-weight);
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='italic'] {
|
|
font-style: italic;
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='underline'] {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='strike'] {
|
|
text-decoration-line: line-through;
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='underline'][data-words-marks~='strike'] {
|
|
text-decoration-line: underline line-through;
|
|
}
|
|
|
|
[data-words-content] :where(code) {
|
|
border-radius: var(--words-code-radius);
|
|
background: var(--words-code-bg);
|
|
color: var(--words-code-color);
|
|
font-family: var(--words-code-font-family);
|
|
padding-block: var(--words-code-py);
|
|
padding-inline: var(--words-code-px);
|
|
}
|
|
|
|
[data-words-content] :where(pre) {
|
|
overflow-x: auto;
|
|
padding-block: var(--words-quote-px);
|
|
padding-inline: var(--words-quote-px);
|
|
border: var(--words-border-width) solid var(--words-toolbar-border);
|
|
border-radius: var(--words-code-radius);
|
|
background: var(--words-code-bg);
|
|
color: var(--words-code-color);
|
|
font-family: var(--words-code-font-family);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
[data-words-content] :where(pre code) {
|
|
display: block;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token] {
|
|
font: inherit;
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='comment'] {
|
|
color: var(--words-status-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='keyword'] {
|
|
color: var(--_words-accent-text);
|
|
font-weight: var(--words-strong-font-weight);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='string'] {
|
|
color: var(--words-affirm-text);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='number'],
|
|
[data-words-content] [data-words-code-token='boolean'] {
|
|
color: var(--words-fulfill-text);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='function'] {
|
|
color: var(--words-secondary-text);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='tag'] {
|
|
color: var(--words-threat-text);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='attribute'],
|
|
[data-words-content] [data-words-code-token='property'] {
|
|
color: var(--words-risk-text);
|
|
}
|
|
|
|
[data-words-content] [data-words-code-token='operator'],
|
|
[data-words-content] [data-words-code-token='punctuation'],
|
|
[data-words-content] [data-words-code-token='variable'] {
|
|
color: var(--words-status-color);
|
|
}
|
|
|
|
[data-words-content] [data-words-marks~='code'] {
|
|
border-radius: var(--words-code-radius);
|
|
background: var(--words-code-bg);
|
|
color: var(--words-code-color);
|
|
font-family: var(--words-code-font-family);
|
|
padding-block: var(--words-code-py);
|
|
padding-inline: var(--words-code-px);
|
|
}
|
|
|
|
[data-words-content] :where(blockquote) {
|
|
padding-inline-start: var(--words-quote-px);
|
|
border-inline-start: var(--words-quote-border-width) solid var(--_words-accent-border);
|
|
color: var(--words-quote-color);
|
|
}
|
|
|
|
[data-words-content] :where(ul, ol) {
|
|
padding-inline-start: var(--words-list-padding-inline-start);
|
|
}
|
|
|
|
[data-words-content] :where(table) {
|
|
inline-size: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
overflow: hidden;
|
|
border: var(--words-border-width) solid var(--words-toolbar-border);
|
|
border-radius: var(--words-code-radius);
|
|
background: var(--words-bg);
|
|
}
|
|
|
|
/* Striped rows — bumped from a faint 70%-transparent overlay to a
|
|
solid toolbar-bg tint so the zebra is actually discernible against
|
|
the editor background. */
|
|
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) td),
|
|
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) th) {
|
|
background: var(--words-toolbar-bg);
|
|
}
|
|
|
|
[data-words-content] :where(table[data-words-table-compact] td),
|
|
[data-words-content] :where(table[data-words-table-compact] th) {
|
|
padding-block: calc(var(--words-code-py) * 0.5);
|
|
padding-inline: calc(var(--words-command-px) * 0.75);
|
|
}
|
|
|
|
[data-words-content] :where(td, th) {
|
|
min-inline-size: calc(var(--_words-button-size) * 2);
|
|
padding-block: var(--words-code-py);
|
|
padding-inline: var(--words-command-px);
|
|
border: var(--words-border-width) solid var(--words-toolbar-border);
|
|
vertical-align: top;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
|
|
/* Subtle hover for every body cell — lets the user know cells are
|
|
interactive (clickable to edit). Header rows opt out below. */
|
|
[data-words-content] :where(table) tr:hover td:not([data-words-cell-header]) {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent);
|
|
}
|
|
|
|
[data-words-content] :where(th),
|
|
[data-words-content] [data-words-cell-header] {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 12%, var(--words-bg));
|
|
color: var(--words-heading-color);
|
|
font-weight: var(--words-strong-font-weight);
|
|
/* Stronger bottom border under the header row so the divider with
|
|
the body is unambiguous regardless of striping. */
|
|
border-block-end-width: calc(var(--words-border-width) * 2);
|
|
}
|
|
|
|
[data-words-content] [data-words-cell-tone='muted'] {
|
|
background: color-mix(in srgb, var(--words-toolbar-bg) 82%, transparent);
|
|
}
|
|
|
|
/* Accent tone — was 14% solid with full accent-text recolor, which
|
|
read as "this cell is broken / special-cased random". Toned down to
|
|
8% background and kept the inherited text color so the cell still
|
|
draws the eye without shouting. */
|
|
[data-words-content] [data-words-cell-tone='accent'] {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg));
|
|
}
|
|
|
|
[data-words-content] [data-words-cell-vertical='middle'] {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[data-words-content] [data-words-cell-vertical='bottom'] {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
[data-words-content] [data-words-node='table-cell']:focus-within {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 8%, transparent);
|
|
}
|
|
|
|
[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='muted']:focus-within {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-toolbar-bg));
|
|
}
|
|
|
|
[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='accent']:focus-within,
|
|
[data-words-content] [data-words-node='table-cell'][data-words-cell-header]:focus-within {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 20%, var(--words-bg));
|
|
}
|
|
|
|
[data-words-content] [data-words-list-kind='check'] {
|
|
list-style: none;
|
|
}
|
|
|
|
[data-words-content] [data-words-check-toggle] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--_words-check-size);
|
|
block-size: var(--_words-check-size);
|
|
margin-inline-end: var(--words-command-gap);
|
|
border: var(--words-border-width) solid var(--_words-accent-border);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-command-solid-color);
|
|
vertical-align: text-bottom;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
[data-words-content] [data-words-check-toggle]::after {
|
|
content: '';
|
|
display: block;
|
|
inline-size: var(--_words-check-mark-width);
|
|
block-size: var(--_words-check-mark-height);
|
|
border-block-end: var(--_words-check-mark-stroke) solid currentColor;
|
|
border-inline-end: var(--_words-check-mark-stroke) solid currentColor;
|
|
opacity: 0;
|
|
transform: rotate(45deg) translateY(var(--_words-check-mark-offset));
|
|
}
|
|
|
|
[data-words-content] [data-words-check-toggle][data-words-checked='true'] {
|
|
border-color: var(--_words-accent-solid);
|
|
background: var(--_words-accent-solid);
|
|
}
|
|
|
|
[data-words-content] [data-words-check-toggle][data-words-checked='true']::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-words][data-disabled] [data-words-check-toggle],
|
|
[data-words][data-readonly] [data-words-check-toggle] {
|
|
cursor: default;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-content] [data-words-indent] {
|
|
margin-inline-start: calc(var(--words-list-padding-inline-start) * var(--_words-indent, 1));
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='1'] {
|
|
--_words-indent: 1;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='2'] {
|
|
--_words-indent: 2;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='3'] {
|
|
--_words-indent: 3;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='4'] {
|
|
--_words-indent: 4;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='5'] {
|
|
--_words-indent: 5;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='6'] {
|
|
--_words-indent: 6;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='7'] {
|
|
--_words-indent: 7;
|
|
}
|
|
|
|
[data-words-content] [data-words-indent='8'] {
|
|
--_words-indent: 8;
|
|
}
|
|
|
|
[data-words-content] :where(a) {
|
|
color: var(--_words-accent-text);
|
|
text-decoration-color: var(--_words-accent-border);
|
|
}
|
|
|
|
[data-words-status] {
|
|
padding-block: var(--words-status-py);
|
|
padding-inline: var(--_words-content-px);
|
|
border-block-start: var(--words-border-width) solid var(--words-toolbar-border);
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-status] {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
[data-words-status][data-status='error'] {
|
|
color: var(--words-status-error-color);
|
|
}
|
|
|
|
[data-words-find-replace] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--words-command-gap);
|
|
inline-size: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
[data-words-find-replace][data-disabled],
|
|
[data-words-find-replace][data-readonly] {
|
|
color: var(--words-status-color);
|
|
}
|
|
|
|
[data-words-find-replace][data-invalid] [data-words-find-counter] {
|
|
color: var(--words-status-error-color);
|
|
}
|
|
|
|
[data-words-find-replace][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-find-replace][data-has-matches] [data-words-find-counter] {
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']) [data-words-find-replace] {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
[data-words]:has([data-words-toolbar][data-orientation='vertical']):has([data-words-find-replace])
|
|
[data-words-status] {
|
|
grid-row: 3;
|
|
}
|
|
|
|
[data-words-find-row],
|
|
[data-words-replace-row] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--words-command-gap);
|
|
}
|
|
|
|
[data-words-find-label],
|
|
[data-words-replace-label] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
}
|
|
|
|
[data-words-find-input],
|
|
[data-words-replace-input] {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
block-size: var(--_words-button-size);
|
|
padding-inline: var(--words-command-px);
|
|
border: var(--words-border-width) solid var(--words-toolbar-border);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-content-color);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-find-input]:focus,
|
|
[data-words-replace-input]:focus {
|
|
border-color: var(--_words-accent-border);
|
|
box-shadow: var(--words-focus-shadow);
|
|
}
|
|
|
|
[data-words-find-input][aria-invalid='true'] {
|
|
border-color: var(--words-invalid-border);
|
|
}
|
|
|
|
[data-words-find-counter] {
|
|
flex: 0 0 auto;
|
|
min-inline-size: 3.5ch;
|
|
color: var(--words-status-color);
|
|
font-size: var(--words-status-font-size);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: end;
|
|
}
|
|
|
|
[data-words-find-prev],
|
|
[data-words-find-next],
|
|
[data-words-find-case],
|
|
[data-words-find-whole],
|
|
[data-words-find-regex],
|
|
[data-words-find-selection],
|
|
[data-words-replace-preserve],
|
|
[data-words-replace-current],
|
|
[data-words-replace-all] {
|
|
display: inline-flex;
|
|
flex: 0 0 var(--_words-button-size);
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--_words-button-size);
|
|
block-size: var(--_words-button-size);
|
|
padding: 0;
|
|
border: var(--words-border-width) solid var(--words-command-border-hover);
|
|
border-radius: var(--words-command-radius);
|
|
background: var(--words-bg);
|
|
color: var(--words-command-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
[data-words-find-prev]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-find-next]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-find-case]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-find-whole]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-find-regex]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-find-selection]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-replace-preserve]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-replace-current]:hover:not(:disabled):not([data-disabled]),
|
|
[data-words-replace-all]:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--words-command-border-hover);
|
|
background: var(--words-command-bg-hover);
|
|
color: var(--words-command-color-hover);
|
|
}
|
|
|
|
[data-words-find-prev]:focus-visible,
|
|
[data-words-find-next]:focus-visible,
|
|
[data-words-find-case]:focus-visible,
|
|
[data-words-find-whole]:focus-visible,
|
|
[data-words-find-regex]:focus-visible,
|
|
[data-words-find-selection]:focus-visible,
|
|
[data-words-replace-preserve]:focus-visible,
|
|
[data-words-replace-current]:focus-visible,
|
|
[data-words-replace-all]:focus-visible {
|
|
box-shadow: var(--words-focus-shadow);
|
|
}
|
|
|
|
[data-words-find-prev]:disabled,
|
|
[data-words-find-next]:disabled,
|
|
[data-words-find-case]:disabled,
|
|
[data-words-find-whole]:disabled,
|
|
[data-words-find-regex]:disabled,
|
|
[data-words-find-selection]:disabled,
|
|
[data-words-replace-preserve]:disabled,
|
|
[data-words-replace-current]:disabled,
|
|
[data-words-replace-all]:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--words-disabled-opacity);
|
|
}
|
|
|
|
[data-words-find-case][data-active],
|
|
[data-words-find-whole][data-active],
|
|
[data-words-find-regex][data-active],
|
|
[data-words-find-selection][data-active],
|
|
[data-words-replace-preserve][data-active] {
|
|
border-color: var(--_words-accent-border);
|
|
background: var(--_words-accent-track);
|
|
color: var(--_words-accent-text);
|
|
}
|
|
|
|
[data-words-replace-all] {
|
|
border-color: var(--_words-accent-solid);
|
|
background: var(--_words-accent-solid);
|
|
color: var(--words-command-solid-color);
|
|
}
|
|
|
|
[data-words-replace-all]:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--_words-accent-solid-hover);
|
|
background: var(--_words-accent-solid-hover);
|
|
color: var(--words-command-solid-color);
|
|
}
|
|
|
|
[data-words-content] mark[data-words-find-match] {
|
|
border-radius: var(--words-code-radius);
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 22%, transparent);
|
|
color: var(--_words-accent-text);
|
|
padding-block: var(--words-code-py);
|
|
padding-inline: var(--words-code-px);
|
|
}
|
|
|
|
[data-words-content] mark[data-words-find-match][data-words-find-active] {
|
|
background: color-mix(in srgb, var(--_words-accent-solid) 55%, transparent);
|
|
outline: 1px solid var(--_words-accent-border);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-words],
|
|
[data-words-command-button] {
|
|
transition: none;
|
|
}
|
|
}
|