Add shared automation and WebUI editing primitives
This commit is contained in:
@@ -3670,3 +3670,350 @@ a.dashboard-contribution-row:hover {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.stage-rail {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stage-rail-track {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stage-rail-group {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.stage-rail-item {
|
||||
display: grid;
|
||||
min-width: 96px;
|
||||
justify-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 5px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.stage-rail-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.stage-rail-item:hover .stage-rail-icon,
|
||||
button.stage-rail-item:focus-visible .stage-rail-icon,
|
||||
.stage-rail-group[data-current="true"] .stage-rail-icon {
|
||||
background: color-mix(in srgb, var(--stage-rail-color) 15%, var(--surface));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-rail-color) 12%, transparent);
|
||||
}
|
||||
|
||||
button.stage-rail-item:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.stage-rail-icon {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--stage-rail-color);
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--stage-rail-color) 8%, var(--surface));
|
||||
color: color-mix(in srgb, var(--stage-rail-color) 82%, var(--text));
|
||||
transition: background .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
|
||||
.stage-rail-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.stage-rail-copy strong {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
color: var(--text-strong);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stage-rail-copy small {
|
||||
display: inline-flex;
|
||||
min-height: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stage-rail-status {
|
||||
color: color-mix(in srgb, var(--stage-rail-color) 72%, var(--text)) !important;
|
||||
}
|
||||
|
||||
.stage-rail-line {
|
||||
width: 42px;
|
||||
height: 2px;
|
||||
flex: 0 0 auto;
|
||||
margin: 21px 2px 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--stage-rail-line-color, var(--stage-rail-color)),
|
||||
var(--stage-rail-line-next-color, var(--stage-rail-color))
|
||||
);
|
||||
opacity: .82;
|
||||
}
|
||||
|
||||
.wysiwyg-editor {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: var(--border-line);
|
||||
border-radius: 5px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-control-inset);
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
|
||||
.wysiwyg-editor:focus-within {
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: var(--focus-ring), var(--shadow-control-inset);
|
||||
}
|
||||
|
||||
.wysiwyg-editor-header {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.wysiwyg-editor-toolbar {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wysiwyg-toolbar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding-right: 4px;
|
||||
border-right: var(--border-line);
|
||||
}
|
||||
|
||||
.wysiwyg-toolbar-group:last-child {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.wysiwyg-toolbar-button.icon-button.btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wysiwyg-toolbar-button.icon-button.btn:hover:not(:disabled),
|
||||
.wysiwyg-toolbar-button.icon-button.btn:focus-visible,
|
||||
.wysiwyg-toolbar-button.icon-button.btn.is-active {
|
||||
border-color: var(--line-dark);
|
||||
background: var(--line);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.wysiwyg-toolbar-button.icon-button.btn.is-active {
|
||||
box-shadow: inset 0 1px 3px rgba(var(--shadow-color-rgb), .12);
|
||||
}
|
||||
|
||||
.wysiwyg-block-style {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.wysiwyg-block-style select {
|
||||
width: 126px;
|
||||
min-height: 32px;
|
||||
padding: 5px 28px 5px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-mode {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-mode .segmented-control-option {
|
||||
min-height: 32px;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-content {
|
||||
min-height: var(--wysiwyg-editor-min-height);
|
||||
background: var(--surface);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror {
|
||||
box-sizing: border-box;
|
||||
min-height: var(--wysiwyg-editor-min-height);
|
||||
padding: 12px 14px;
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror p,
|
||||
.wysiwyg-prosemirror blockquote,
|
||||
.wysiwyg-prosemirror pre,
|
||||
.wysiwyg-prosemirror ul,
|
||||
.wysiwyg-prosemirror ol {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror h1,
|
||||
.wysiwyg-prosemirror h2,
|
||||
.wysiwyg-prosemirror h3 {
|
||||
margin: 14px 0 8px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror h3 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror blockquote {
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid var(--line-dark);
|
||||
color: var(--text-subtle);
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror pre {
|
||||
overflow: auto;
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
background: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.wysiwyg-prosemirror img.ProseMirror-selectednode {
|
||||
outline: 2px solid var(--primary-border);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wysiwyg-inline-token {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
margin: 0 2px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid var(--primary-border);
|
||||
border-radius: 4px;
|
||||
background: var(--primary-soft);
|
||||
color: var(--info-text-deep);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: .88em;
|
||||
line-height: 1.35;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wysiwyg-inline-token.ProseMirror-selectednode {
|
||||
background: var(--primary-soft-strong);
|
||||
box-shadow: var(--primary-focus-ring);
|
||||
}
|
||||
|
||||
.wysiwyg-editor.is-disabled .wysiwyg-editor-content {
|
||||
background: var(--control-disabled-bg);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wysiwyg-editor.is-disabled .wysiwyg-prosemirror {
|
||||
color: var(--control-disabled-text);
|
||||
}
|
||||
|
||||
.wysiwyg-editor-source {
|
||||
display: block;
|
||||
min-height: var(--wysiwyg-editor-min-height);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-source:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-source-note {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--warning-border-soft);
|
||||
background: var(--warning-muted-bg);
|
||||
color: var(--warning-text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dialog-panel.wysiwyg-editor-dialog {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.wysiwyg-editor-dialog-error {
|
||||
margin: 0;
|
||||
color: var(--danger-text-strong);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.wysiwyg-editor-header {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.wysiwyg-editor-mode {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user