541 lines
11 KiB
CSS
541 lines
11 KiB
CSS
/* The visual editor fills the entire main content area.
|
|
Layout.module.css sets padding: 32px on <main>; we break out of it
|
|
with negative margins so the editor gets a true full-bleed surface. */
|
|
|
|
.editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Pull back the 32px padding that Layout.module.css adds to <main> */
|
|
margin: -32px;
|
|
height: calc(100% + 64px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Loading overlay ─────────────────────────────────────────────── */
|
|
|
|
.loadingOverlay {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #8b949e;
|
|
}
|
|
|
|
/* ── Visual Editor command ribbon ────────────────────────────────── */
|
|
|
|
.commandRibbon {
|
|
--ribbon-border: #cbd5e1;
|
|
--ribbon-control-border: #b8c3d1;
|
|
--ribbon-focus: #2563eb;
|
|
flex-shrink: 0;
|
|
padding: 8px 10px 7px;
|
|
overflow-x: hidden;
|
|
background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
|
border-bottom: 1px solid var(--ribbon-border);
|
|
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.07);
|
|
}
|
|
|
|
.ribbonGroups {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
row-gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.ribbonGroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 76px;
|
|
padding: 0 12px;
|
|
border-right: 1px solid var(--ribbon-border);
|
|
}
|
|
|
|
.ribbonGroup:first-child { padding-left: 2px; }
|
|
.ribbonGroup:last-child { border-right: 0; }
|
|
|
|
.ribbonGroupBody {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
flex: 1;
|
|
}
|
|
|
|
.ribbonGroupLabel {
|
|
min-height: 17px;
|
|
padding-top: 4px;
|
|
color: #64748b;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.055em;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ribbonGroupLabel code {
|
|
margin-left: 5px;
|
|
color: #94a3b8;
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
.pagesGroup { min-width: 420px; }
|
|
.settingsGroup { min-width: 555px; }
|
|
.lifecycleGroup { min-width: 360px; }
|
|
.dangerGroup { min-width: 112px; }
|
|
|
|
.pagePicker {
|
|
width: 158px;
|
|
min-height: 34px;
|
|
padding: 6px 30px 6px 10px;
|
|
border: 1px solid #8da2ba;
|
|
border-radius: 6px;
|
|
background: #ffffff;
|
|
color: #172033;
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.commandButton,
|
|
.iconButton,
|
|
.dangerCommand {
|
|
border: 1px solid var(--ribbon-control-border);
|
|
border-radius: 6px;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
|
|
color: #243247;
|
|
font: inherit;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.commandButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
min-height: 34px;
|
|
padding: 6px 9px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.commandIcon {
|
|
color: #47627f;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
}
|
|
|
|
.commandButton:hover:not(:disabled),
|
|
.iconButton:hover:not(:disabled) {
|
|
border-color: #6b8db3;
|
|
background: #ffffff;
|
|
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12);
|
|
}
|
|
|
|
.commandButton:active:not(:disabled),
|
|
.iconButton:active:not(:disabled),
|
|
.dangerCommand:active:not(:disabled) { transform: translateY(1px); }
|
|
|
|
.commandButton:disabled,
|
|
.iconButton:disabled,
|
|
.dangerCommand:disabled {
|
|
border-color: #d7dee8;
|
|
background: #eef2f6;
|
|
color: #99a5b5;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.commandButtonSelected,
|
|
.commandButtonSelected:disabled {
|
|
border-color: #93c5fd;
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
opacity: 1;
|
|
}
|
|
|
|
.commandButtonSelected .commandIcon { color: #d97706; }
|
|
|
|
.commandPair {
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.iconButton {
|
|
width: 31px;
|
|
min-height: 34px;
|
|
border-radius: 0;
|
|
font-size: 16px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.iconButton + .iconButton { margin-left: -1px; }
|
|
.iconButton:first-child { border-radius: 6px 0 0 6px; }
|
|
.iconButton:last-child { border-radius: 0 6px 6px 0; }
|
|
|
|
.ribbonField {
|
|
display: grid;
|
|
gap: 3px;
|
|
color: #64748b;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ribbonField input,
|
|
.pageEventSelect {
|
|
box-sizing: border-box;
|
|
height: 32px;
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--ribbon-control-border);
|
|
border-radius: 5px;
|
|
background: #ffffff;
|
|
color: #172033;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.035);
|
|
}
|
|
|
|
.ribbonField input { width: 145px; }
|
|
|
|
.pageSettingActions {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.pageSettingActions .commandButton { min-height: 28px; padding-block: 3px; }
|
|
|
|
.toggleControl {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #475569;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggleControl input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.toggleTrack {
|
|
position: relative;
|
|
width: 26px;
|
|
height: 14px;
|
|
border-radius: 999px;
|
|
background: #94a3b8;
|
|
transition: background 120ms ease;
|
|
}
|
|
|
|
.toggleTrack::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.toggleControl input:checked + .toggleTrack { background: #2563eb; }
|
|
.toggleControl input:checked + .toggleTrack::after { transform: translateX(12px); }
|
|
|
|
.dangerCommand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 34px;
|
|
padding: 6px 10px;
|
|
border-color: #fecaca;
|
|
background: #fff7f7;
|
|
color: #b4232c;
|
|
}
|
|
|
|
.dangerCommand .commandIcon { color: #cf222e; }
|
|
.dangerCommand:hover:not(:disabled) { border-color: #e5484d; background: #fff0f0; }
|
|
|
|
.commandRibbon :is(button, select, input):focus-visible,
|
|
.toggleControl input:focus-visible + .toggleTrack {
|
|
outline: 2px solid var(--ribbon-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.srOnly {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* ── Editor info bar (below project toolbar) ─────────────────────── */
|
|
|
|
.editorBar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 30px;
|
|
padding: 0 16px;
|
|
background: #f7f8fa;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.projectName {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1f2328;
|
|
}
|
|
|
|
.pageName {
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
background: #e5e7eb;
|
|
border-radius: 3px;
|
|
padding: 1px 7px;
|
|
}
|
|
|
|
.componentCount {
|
|
font-size: 12px;
|
|
color: #8b949e;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.pageEventEditor {
|
|
display: grid;
|
|
grid-template-columns: auto 142px;
|
|
align-items: center;
|
|
gap: 5px 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.pageEventLabel,
|
|
.pageEventHint,
|
|
.pageEventError {
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pageEventLabel,
|
|
.pageEventHint {
|
|
color: #57606a;
|
|
}
|
|
|
|
.pageEventError {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.pageEventSelect {
|
|
width: 142px;
|
|
min-width: 0;
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.ribbonGroup { padding-inline: 9px; }
|
|
.settingsGroup { min-width: 520px; }
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
.commandRibbon { padding-inline: 7px; }
|
|
.ribbonGroupLabel code { display: none; }
|
|
.commandButton span:last-child,
|
|
.dangerCommand span:last-child { display: none; }
|
|
.commandButton,
|
|
.dangerCommand { width: 34px; padding-inline: 5px; }
|
|
.pagesGroup { min-width: 320px; }
|
|
.settingsGroup { min-width: 500px; }
|
|
}
|
|
|
|
/* ── Body: palette | canvas | info ───────────────────────────────── */
|
|
|
|
.body {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Right info / JSON panel ─────────────────────────────────────── */
|
|
|
|
.info {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
background: #f7f8fa;
|
|
border-left: 1px solid #e5e7eb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.infoHeader {
|
|
padding: 10px 14px 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #8b949e;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.infoBody {
|
|
padding: 8px 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.infoRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 3px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.infoRow:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.infoKey {
|
|
font-size: 11px;
|
|
color: #8b949e;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.infoVal {
|
|
font-size: 12px;
|
|
color: #1f2328;
|
|
font-family: 'SFMono-Regular', Consolas, monospace;
|
|
max-width: 120px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.infoInput {
|
|
font-size: 12px;
|
|
color: #1f2328;
|
|
background: #ffffff;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
width: 120px;
|
|
outline: none;
|
|
}
|
|
|
|
.infoInput:focus {
|
|
border-color: #3b82d4;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 212, 0.18);
|
|
}
|
|
|
|
.infoEmpty {
|
|
padding: 12px 14px;
|
|
font-size: 12px;
|
|
color: #b1bac4;
|
|
}
|
|
|
|
/* ── Compact JSON read-out ────────────────────────────────────────── */
|
|
|
|
.jsonSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
border-top: 1px solid #e5e7eb;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.jsonPre {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 8px 14px;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
color: #57606a;
|
|
white-space: pre;
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.deleteDialogBackdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
background: rgba(31, 35, 40, 0.48);
|
|
}
|
|
|
|
.deleteDialog {
|
|
width: min(520px, 100%);
|
|
max-height: calc(100vh - 48px);
|
|
overflow: auto;
|
|
padding: 20px;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 12px 36px rgba(31, 35, 40, 0.24);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.deleteDialog h2 {
|
|
margin: 0 0 12px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.deleteDialog p,
|
|
.deleteDialog li {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.deleteDialogActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.deleteDialogActions button {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.deleteDialogActions .dangerButton {
|
|
border-color: #cf222e;
|
|
background: #cf222e;
|
|
color: #ffffff;
|
|
}
|