Refine table selector chrome
This commit is contained in:
@@ -314,11 +314,6 @@ textarea {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.critical-cell-status-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.critical-cell-status-chip,
|
||||
.critical-editor-curation-badge {
|
||||
display: inline-flex;
|
||||
@@ -581,6 +576,107 @@ textarea {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.table-select-shell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-select-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid rgba(127, 96, 55, 0.28);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 252, 247, 0.96);
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.table-select-trigger-copy {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-select-trigger-title {
|
||||
color: var(--ink);
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
.table-select-trigger-chips,
|
||||
.table-select-option-chips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-selector-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.table-select-menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + 0.1rem);
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
padding: 0.1rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 250, 242, 0.98);
|
||||
border: 1px solid rgba(127, 96, 55, 0.22);
|
||||
box-shadow: 0 10px 18px rgba(41, 22, 11, 0.1);
|
||||
max-height: min(28rem, 60vh);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table-select-option {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 0.35rem 0.45rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.45rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-select-option.is-selected {
|
||||
outline: 1px solid rgba(41, 22, 11, 0.14);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.table-select-option.is-curated {
|
||||
background: rgba(102, 138, 83, 0.12);
|
||||
}
|
||||
|
||||
.table-select-option.needs-curation {
|
||||
background: rgba(184, 121, 59, 0.12);
|
||||
}
|
||||
|
||||
.table-select-option-main {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-select-option-title {
|
||||
color: var(--ink);
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-browser-toolbar-copy,
|
||||
.table-browser-reading-hint,
|
||||
.table-browser-edit-hint {
|
||||
@@ -641,25 +737,13 @@ textarea {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
min-width: 190px;
|
||||
max-width: 250px;
|
||||
padding: 0;
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.critical-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.critical-table-cell.is-editable {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.critical-table-cell.is-editable:hover,
|
||||
.critical-table-cell.is-editable:focus-visible {
|
||||
background: rgba(255, 248, 232, 0.98);
|
||||
box-shadow: inset 0 0 0 2px rgba(184, 121, 59, 0.4);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.critical-table-cell.is-curated {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(102, 138, 83, 0.16), transparent 34%),
|
||||
@@ -672,11 +756,49 @@ textarea {
|
||||
rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.critical-table-cell-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.critical-table-cell-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.45rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.critical-cell-action-button {
|
||||
border: 1px solid rgba(127, 96, 55, 0.18);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.7rem;
|
||||
background: rgba(255, 252, 247, 0.92);
|
||||
color: #5b4327;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.critical-cell-action-button.is-curation {
|
||||
background: rgba(255, 242, 223, 0.95);
|
||||
border-color: rgba(184, 121, 59, 0.28);
|
||||
color: #8a5b21;
|
||||
}
|
||||
|
||||
.critical-cell-action-button.is-edit {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.critical-cell-action-button:hover {
|
||||
background: rgba(255, 248, 236, 0.98);
|
||||
}
|
||||
|
||||
.critical-table td .critical-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.55rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -692,11 +814,6 @@ textarea {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.critical-table-cell.is-editable:hover .critical-cell-description,
|
||||
.critical-table-cell.is-editable:focus-visible .critical-cell-description {
|
||||
color: #8f5a2f;
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
color: #a08464;
|
||||
font-style: italic;
|
||||
@@ -828,25 +945,6 @@ textarea {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.critical-editor-source-grid {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
|
||||
}
|
||||
|
||||
.critical-editor-status-card,
|
||||
.critical-editor-source-card {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.critical-editor-curation-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--font-heading);
|
||||
color: #5b4327;
|
||||
}
|
||||
|
||||
.critical-editor-source-image {
|
||||
width: 100%;
|
||||
max-height: 340px;
|
||||
@@ -856,6 +954,11 @@ textarea {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.critical-editor-source-image.is-inline {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.critical-editor-section h4,
|
||||
.critical-editor-subsection h5 {
|
||||
margin: 0;
|
||||
@@ -902,6 +1005,8 @@ textarea {
|
||||
|
||||
.critical-editor-textarea.tall {
|
||||
min-height: 8rem;
|
||||
height: 8rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.critical-editor-dialog input.input-shell,
|
||||
@@ -921,6 +1026,42 @@ textarea {
|
||||
border: 1px solid rgba(141, 43, 30, 0.18);
|
||||
}
|
||||
|
||||
.critical-editor-quick-parse-grid {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
grid-template-columns: minmax(320px, 1.35fr) minmax(260px, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.critical-editor-quick-parse-source {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.critical-editor-quick-parse-source-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.critical-editor-quick-parse-source-header label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.critical-editor-quick-parse-source-frame {
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.55rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(127, 96, 55, 0.14);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.critical-editor-inline-copy {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1201,6 +1342,80 @@ textarea {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.critical-curation-dialog {
|
||||
width: min(860px, 100%);
|
||||
max-height: min(480px, calc(100vh - 2.5rem));
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.critical-curation-body {
|
||||
flex: 0 1 auto;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
padding: 0.85rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.critical-curation-grid {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.critical-curation-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem 0.65rem;
|
||||
padding: 0.55rem 0.7rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(247, 239, 225, 0.5);
|
||||
border: 1px solid rgba(127, 96, 55, 0.12);
|
||||
}
|
||||
|
||||
.critical-curation-legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.critical-curation-legend-item strong {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.critical-curation-preview-card,
|
||||
.critical-curation-source-card {
|
||||
min-height: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.critical-curation-source-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.critical-curation-source-image {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.critical-curation-source-empty {
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.critical-curation-dialog .critical-editor-header,
|
||||
.critical-curation-dialog .critical-editor-footer {
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.content-shell {
|
||||
padding: 1rem;
|
||||
@@ -1243,7 +1458,8 @@ textarea {
|
||||
|
||||
.critical-editor-effect-row-main,
|
||||
.critical-editor-branch-line,
|
||||
.critical-editor-source-grid {
|
||||
.critical-editor-quick-parse-grid,
|
||||
.critical-curation-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user