Multi-person OCR person-group styles
OCR review UX card and preview styles
Line 697: Line 697:
border: 1px solid #a2a9b1;
border: 1px solid #a2a9b1;
width: auto;
width: auto;
max-width: 48em;
max-width: 56em;
box-sizing: border-box;
box-sizing: border-box;
clear: both;
clear: both;
Line 724: Line 724:
max-width: min(280px, 100%);
max-width: min(280px, 100%);
box-sizing: border-box;
box-sizing: border-box;
}
.ocr-preview-sticky {
position: sticky;
top: 0.75em;
align-self: flex-start;
}
}
.ocr-review-preview img {
.ocr-review-preview img {
Line 752: Line 757:
border-bottom: 1px solid #e4e8df;
border-bottom: 1px solid #e4e8df;
}
}
.ocr-fact-row input[type="text"] {
.ocr-change-line {
flex: 1 1 12em;
min-width: 0;
}
.ocr-fact-details {
flex: 1 1 100%;
margin: 0.15em 0 0.25em 1.5em;
font-size: 90%;
}
.ocr-fact-details summary {
cursor: pointer;
color: #54595d;
}
.ocr-fact-row input[type="text"],
.ocr-fact-value {
flex: 1 1 12em;
flex: 1 1 12em;
min-width: 0;
min-width: 0;
Line 768: Line 787:
gap: 0.5em;
gap: 0.5em;
align-items: center;
align-items: center;
}
.ocr-apply-btn {
font-weight: 600;
}
}
.ocr-review-status {
.ocr-review-status {
margin: 0.5em 0 0;
margin: 0.5em 0 0;
font-size: 95%;
font-size: 95%;
flex: 1 1 100%;
}
.ocr-apply-preview {
margin: 0.85em 0;
padding: 0.55em 0.7em;
background: #f0f6e8;
border: 1px solid #a3b18a;
}
.ocr-apply-preview-list {
margin: 0.35em 0 0;
padding-left: 1.2em;
}
.ocr-apply-preview-list li {
margin: 0.2em 0;
}
.ocr-advanced {
margin: 0.75em 0;
padding: 0.4em 0.55em;
border: 1px dashed #a2a9b1;
background: #f8f9fa;
}
.ocr-advanced > summary {
cursor: pointer;
font-weight: 600;
}
.ocr-advanced-body {
margin-top: 0.5em;
}
.ocr-advanced-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin-top: 0.5em;
}
.ocr-person-card {
margin: 0.75em 0;
padding: 0.65em 0.75em;
border: 1px solid #c8ccd1;
background: #fff;
border-radius: 2px;
}
.ocr-person-matched {
border-left: 4px solid #14866d;
}
.ocr-person-unresolved {
border-left: 4px solid #fc3;
background: #fffdf5;
}
.ocr-card-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em 0.85em;
margin-bottom: 0.35em;
}
.ocr-include-label {
font-size: 90%;
white-space: nowrap;
}
.ocr-card-name {
font-weight: 600;
font-size: 1.05em;
}
.ocr-card-meta,
.ocr-match-status {
font-size: 90%;
color: #54595d;
width: 100%;
}
.ocr-card-match {
margin: 0.35em 0 0.5em;
}
.ocr-suggest {
display: flex;
flex-direction: column;
gap: 0.15em;
margin: 0.25em 0 0.4em;
max-width: 100%;
border: 1px solid #a2a9b1;
background: #fff;
padding: 0.25em;
}
.ocr-suggest-item {
display: block;
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 0.3em 0.4em;
cursor: pointer;
}
.ocr-suggest-item:hover {
background: #eaecf0;
}
.ocr-card-changes {
margin-top: 0.25em;
}
.ocr-card-more {
margin-top: 0.45em;
font-size: 90%;
}
.ocr-apply-success .ocr-apply-links {
margin: 0.5em 0;
padding-left: 1.2em;
}
.ocr-apply-success .ocr-apply-links li {
margin: 0.35em 0;
}
.ocr-queue-item {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: flex-start;
}
.ocr-queue-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border: 1px solid #ccc;
background: #fff;
flex: 0 0 auto;
}
.ocr-queue-meta {
flex: 1 1 12em;
min-width: 0;
}
}
.ocr-progress-wrap {
.ocr-progress-wrap {
Line 858: Line 1,005:
gap: 0.4em;
gap: 0.4em;
margin: 0.4em 0 0.6em;
margin: 0.4em 0 0.6em;
}
.ocr-person-group {
margin: 0.75em 0;
padding: 0.5em 0.65em;
border: 1px solid #c8ccd1;
background: #fff;
}
.ocr-person-matched {
border-left: 4px solid #14866d;
}
.ocr-person-unresolved {
border-left: 4px solid #fc3;
background: #fffdf5;
}
.ocr-person-group h4 {
margin: 0 0 0.35em;
font-size: 1em;
}
}
.ocr-person-title,
.ocr-person-title,
Line 893: Line 1,023:
background: #fff;
background: #fff;
border: 1px solid #ddd;
border: 1px solid #ddd;
}
/* Legacy person-group class kept for older cached markup */
.ocr-person-group {
margin: 0.75em 0;
padding: 0.5em 0.65em;
border: 1px solid #c8ccd1;
background: #fff;
}
.ocr-person-group h4 {
margin: 0 0 0.35em;
font-size: 1em;
}
}