File size: 3,268 Bytes
76fc93a 1f88239 a2d6d01 76fc93a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | /* ============================================================================ */
/* Hero editable elements */
/* */
/* Transparent inputs & click-to-edit affordances used inside FrontmatterHero. */
/* The !important cluster on .editable-text-input is intentional: it flattens */
/* every inherited form control style so the input looks identical to the */
/* surrounding heading text. Loaded AFTER _form.css so these wins the cascade. */
/* ============================================================================ */
.editable-text { cursor: text; }
.editable-text:not(.hero-title):not(.hero-desc) {
border-radius: 4px;
transition: background 0.15s;
padding: 2px 4px;
margin: -2px -4px;
}
.editable-text:not(.hero-title):not(.hero-desc):hover {
background: var(--bg-hover);
}
.editable-text-input,
.editable-text-input:focus,
.editable-text-input:hover,
.editable-text-input:active {
font: inherit !important;
color: inherit !important;
text-align: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
resize: none !important;
overflow: hidden !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
text-wrap: balance !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
min-height: 0 !important;
}
.editable-text-input--inline,
.editable-text-input--inline:focus,
.editable-text-input--inline:hover,
.editable-text-input--inline:active {
display: inline !important;
width: auto !important;
white-space: normal !important;
}
.editable-text-input::placeholder {
color: inherit;
opacity: 0.35;
}
.author-editable {
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.author-editable:hover { background: var(--bg-hover); }
/* Affiliations open the same manager modal on click (editor-only). The
pointer cursor + subtle hover signal they're interactive without leaking
into the published article, which loads _hero.css but not this file. */
.affiliations--clickable { cursor: pointer; border-radius: 4px; }
.affiliations--clickable:hover { background: var(--bg-hover); }
.author-add-btn {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.meta-placeholder-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px dashed var(--border-color);
border-radius: 6px;
background: transparent;
color: var(--muted-color);
font: inherit;
font-size: 0.85rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.meta-placeholder-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(149, 141, 241, 0.06);
}
|