Claims2 / styles.css
kyu30's picture
styling
ea50ef3
/* ═══════════════════════════════════════════════════════════════
CLAIMS 2.0 Β· Redesigned styles.css
Drop-in replacement β€” all original class names preserved
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
:root {
/* backgrounds */
--bg: #080c18;
--bg-elevated: #0d1424;
--bg-2: #111827;
/* accent / brand */
--accent: #3b82f6;
--accent-soft: rgba(59,130,246,0.1);
--accent-strong: rgba(59,130,246,0.3);
/* text */
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-dim: #64748b;
/* borders */
--border-subtle: rgba(255,255,255,0.07);
--border-mid: rgba(255,255,255,0.12);
/* semantic: subclaim = teal */
--teal: #0d9488;
--teal-bg: rgba(13,148,136,0.1);
--teal-border: rgba(13,148,136,0.35);
--teal-text: #5eead4;
/* semantic: superclaim = amber */
--amber: #d97706;
--amber-bg: rgba(217,119,6,0.1);
--amber-border: rgba(217,119,6,0.35);
--amber-text: #fcd34d;
/* semantic: approved */
--green: #059669;
--green-bg: rgba(5,150,105,0.12);
--green-border: rgba(5,150,105,0.4);
--green-text: #34d399;
/* semantic: rejected / danger */
--danger: #dc2626;
--danger-bg: rgba(220,38,38,0.1);
--danger-border: rgba(220,38,38,0.35);
--danger-text: #f87171;
/* radii */
--radius-lg: 14px;
--radius-md: 9px;
/* shadows (lighter than before) */
--shadow-soft: 0 12px 32px rgba(0,0,0,0.5);
--shadow-subtle: 0 6px 18px rgba(0,0,0,0.3);
--transition-fast: 150ms ease-out;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at top, #0d1424 0, #06091a 40%, #000 100%);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
/* ── APP SHELL ─────────────────────────────────────────── */
.app {
max-width: 1120px;
margin: 28px auto;
padding: 20px;
}
/* ── HEADER ─────────────────────────────────────────────── */
.app-header {
background: var(--bg-elevated);
border-radius: 20px;
padding: 20px 24px 18px;
border: 1px solid var(--border-mid);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
/* rainbow accent line at very top */
.app-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--teal), var(--accent), var(--amber));
pointer-events: none;
}
/* subtle glow */
.app-header::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 0%, rgba(96,165,250,0.12), transparent 55%),
radial-gradient(circle at 90% 0%, rgba(129,140,248,0.12), transparent 55%);
pointer-events: none;
}
.app-header h1,
.app-header p { position: relative; z-index: 1; }
.app-header h1 {
margin: 0 0 5px;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
}
.app-header p {
margin: 0;
font-size: 13px;
color: var(--text-muted);
}
/* stats chips row (add to your header HTML if desired) */
.stats-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
position: relative;
z-index: 1;
}
.stat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: var(--bg-2);
font-size: 12px;
color: var(--text-muted);
}
.stat-chip strong {
font-weight: 600;
color: var(--text);
}
.stat-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── INPUT SECTION ──────────────────────────────────────── */
.input-section {
margin-top: 20px;
padding: 16px;
background: var(--bg-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-subtle);
}
.field-label {
display: block;
margin-bottom: 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
color: var(--text-dim);
}
.text-input {
width: 100%;
resize: vertical;
min-height: 160px;
max-height: 340px;
padding: 12px 14px;
font-size: 14px;
font-family: 'DM Sans', sans-serif;
color: var(--text);
background: rgba(0,0,0,0.3);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.text-input:focus {
border-color: rgba(59,130,246,0.5);
box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.text-input::placeholder { color: var(--text-dim); }
.controls {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.primary-btn {
border: none;
border-radius: 999px;
padding: 8px 20px;
font-size: 13px;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(135deg, #2563eb, #4f46e5);
color: #fff;
box-shadow: 0 4px 18px rgba(37,99,235,0.4);
display: inline-flex;
align-items: center;
gap: 6px;
transition: transform var(--transition-fast), filter var(--transition-fast);
}
.primary-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
}
.primary-btn:active {
transform: translateY(0);
filter: brightness(0.97);
}
.primary-btn:disabled {
opacity: 0.5;
cursor: default;
transform: none;
}
.status-text {
font-size: 12px;
color: var(--text-dim);
}
/* ── RESULTS SECTION HEADER ─────────────────────────────── */
.results-section { margin-top: 24px; }
.results-section h2 {
margin: 0 0 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 8px;
}
.results-section h2::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-subtle);
}
/* ── REVIEWER ROW ───────────────────────────────────────── */
.reviewer-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.reviewer-row .field-label { margin: 0; }
.reviewer-input {
min-height: auto;
max-height: none;
height: 40px;
resize: none;
padding: 8px 12px;
}
/* ── RESULTS CONTAINER ──────────────────────────────────── */
.results-container {
background: var(--bg-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-subtle);
padding: 10px 14px 12px;
max-height: 460px;
overflow: auto;
}
#proposals-container.results-container {
padding: 0;
max-height: 400px;
overflow: hidden;
}
/* ── PENDING PROPOSAL CARD ──────────────────────────────── */
.pending-proposal-card {
margin: 0;
border-bottom: 1px solid var(--border-subtle);
transition: background var(--transition-fast);
}
.pending-proposal-card:last-child { border-bottom: none; }
.pending-proposal-card:hover { background: rgba(255,255,255,0.02); }
.pending-proposal-top {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px 0;
}
.pending-proposal-body {
padding: 10px 16px 12px;
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
background: rgba(0,0,0,0.18);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
margin: 8px 0;
}
.pending-proposal-actions {
display: flex;
gap: 8px;
padding: 0 16px 14px;
}
/* ── ACTION BUTTONS ────────────────────────────────────── */
.action-btn {
border-radius: 999px;
padding: 7px 14px;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: filter var(--transition-fast), transform var(--transition-fast);
/* default neutral style */
border: 1px solid var(--border-mid);
background: rgba(255,255,255,0.04);
color: var(--text-muted);
}
.action-btn:hover {
transform: translateY(-1px);
filter: brightness(1.15);
}
.action-btn:active { transform: translateY(0); }
.action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}
/* approve = green */
.action-btn:first-child {
border-color: var(--green-border);
background: var(--green-bg);
color: var(--green-text);
}
/* reject = red */
.action-btn--danger {
border-color: var(--danger-border);
background: var(--danger-bg);
color: var(--danger-text);
}
/* apply = blue */
.action-btn--accent {
border-color: var(--accent-strong);
background: var(--accent-soft);
color: #93c5fd;
margin-left: auto;
}
.placeholder {
margin: 0;
font-size: 13px;
color: var(--text-dim);
text-align: center;
padding: 16px;
}
/* ── RESULTS TABLE ──────────────────────────────────────── */
.results-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.results-table thead {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-elevated);
}
.results-table th,
.results-table td {
padding: 9px 11px;
vertical-align: top;
text-align: left;
}
.results-table th {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
border-bottom: 1px solid var(--border-subtle);
}
.sentence-cell {
min-width: 220px;
max-width: 320px;
}
/* ── RESULTS LEDGER ─────────────────────────────────────── */
.results-ledger {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── PARAGRAPH RESULT CARD ──────────────────────────────── */
.paragraph-result-card {
margin: 0;
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
background: var(--bg-elevated);
box-shadow: var(--shadow-subtle);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.paragraph-result-card:hover { border-color: var(--border-mid); }
.paragraph-result-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid var(--border-subtle);
}
.paragraph-result-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border-radius: 9px;
font-size: 13px;
font-weight: 600;
font-family: 'DM Mono', monospace;
color: #93c5fd;
background: var(--accent-soft);
border: 1px solid var(--accent-strong);
}
.paragraph-result-header-text { min-width: 0; flex: 1; }
.paragraph-result-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.paragraph-result-sub {
margin-top: 3px;
font-size: 11px;
color: var(--text-dim);
}
.results-table--in-card { margin: 0; }
.results-table--in-card thead {
background: rgba(0,0,0,0.2);
}
.results-table--in-card th,
.results-table--in-card td {
padding: 10px 14px;
}
/* paragraph text column accent */
.paragraph-cell {
border-left: 2px solid var(--accent-strong);
padding-left: 12px;
line-height: 1.6;
color: var(--text-muted);
font-size: 13px;
}
/* ── CLAIM PILLS ────────────────────────────────────────── */
.claims-list {
margin: 0; padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.claim-pill { padding: 0; }
.claim-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-dim);
margin-bottom: 4px;
}
.claim-text {
font-size: 13px;
color: var(--text);
line-height: 1.5;
}
.claim-meta {
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
}
/* ── CLAIM ID BADGE ─────────────────────────────────────── */
.claim-id {
font-family: 'DM Mono', monospace;
font-weight: 500;
color: var(--text-muted);
font-size: 11px;
}
/* Subclaim chip β€” teal */
.claim-type-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 5px;
}
.claim-type-tag--sub {
background: var(--teal-bg);
border: 1px solid var(--teal-border);
color: var(--teal-text);
}
.claim-type-tag--super {
background: var(--amber-bg);
border: 1px solid var(--amber-border);
color: var(--amber-text);
}
/* ── SIMILARITY BAR ─────────────────────────────────────── */
.sim-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 7px;
}
.sim-label {
font-size: 10px;
color: var(--text-dim);
white-space: nowrap;
}
.sim-bar-wrap {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
overflow: hidden;
}
.sim-bar-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--teal), #22d3ee);
}
.sim-bar-fill--amber {
background: linear-gradient(90deg, var(--amber), #fbbf24);
}
.sim-val {
font-family: 'DM Mono', monospace;
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
min-width: 30px;
text-align: right;
}
/* ── TOPIC CHIPS ────────────────────────────────────────── */
.topic-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 5px;
}
.topic-chip--none {
background: var(--danger-bg);
border: 1px solid var(--danger-border);
color: var(--danger-text);
}
.topic-chip--match {
background: var(--green-bg);
border: 1px solid var(--green-border);
color: var(--green-text);
}
/* ── COLLAPSE / TAXONOMY WIDGETS ───────────────────────── */
.collapse-block { margin-top: 8px; }
.collapse-badge {
display: inline-block;
margin-bottom: 4px;
padding: 2px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--amber-text);
background: var(--amber-bg);
border: 1px solid var(--amber-border);
}
.collapse-badge-quiet {
color: var(--text-dim);
background: rgba(51,65,85,0.4);
border-color: rgba(100,116,139,0.5);
font-weight: 500;
}
.collapse-meta { display: block; line-height: 1.45; }
.collapse-topic-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.collapse-peers { font-size: 12px; color: var(--text); }
.collapse-peers .claim-id { margin-right: 4px; }
.collapse-more { color: var(--text-dim); font-size: 11px; }
.collapse-meta code { font-size: 10px; color: #a5b4fc; font-family: 'DM Mono', monospace; }
.hierarchy-confidence {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 8px;
}
.hierarchy-confidence strong {
color: var(--teal-text);
font-weight: 600;
}
.collapse-peer-superclaims {
margin-top: 8px;
padding: 10px 12px 8px;
border-radius: var(--radius-md);
background: rgba(0,0,0,0.25);
border: 1px solid var(--border-subtle);
}
.collapse-peer-superclaims-title {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--amber-text);
margin-bottom: 4px;
}
.collapse-peer-superclaims-hint {
margin: 0 0 8px;
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
}
.collapse-sc-target-list { margin: 0; padding-left: 18px; color: var(--text-muted); }
.collapse-sc-target-item { margin-bottom: 10px; }
.collapse-sc-target-item:last-child { margin-bottom: 4px; }
.collapse-sc-target-line { font-size: 12px; margin-bottom: 2px; }
.collapse-sc-target-text { font-size: 11px; color: #cbd5e1; line-height: 1.35; margin-top: 2px; }
.collapse-sc-target-meta { margin-top: 4px; font-size: 10px; color: var(--text-dim); }
.collapse-peer-superclaims-stale {
margin: 0 0 8px;
font-size: 11px;
color: #fcd34d;
line-height: 1.4;
}
.collapse-peer-superclaims-stale code {
font-size: 10px;
color: #fde68a;
font-family: 'DM Mono', monospace;
}
.collapse-stale-cluster-msg {
margin-top: 8px;
padding: 10px;
font-size: 11px;
line-height: 1.45;
color: #fecaca;
background: rgba(127,29,29,0.18);
border: 1px solid var(--danger-border);
border-radius: var(--radius-md);
}
.collapse-stale-cluster-msg code {
font-size: 10px;
color: #fca5a5;
font-family: 'DM Mono', monospace;
}
.collapse-mapping-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--green-text);
background: var(--green-bg);
border: 1px solid var(--green-border);
vertical-align: middle;
}
.collapse-peer-superclaims--empty {
font-size: 11px;
color: var(--text-dim);
margin-top: 6px;
}
/* ── MISC ───────────────────────────────────────────────── */
.sentence-chip {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-subtle);
}
.sentence-chip span { font-size: 12px; color: var(--text-muted); }
.no-match { font-size: 12px; color: var(--text-dim); }
.no-match strong { color: var(--text-muted); }
.error-text { color: var(--danger-text); }
.proposal-empty-hint {
margin-top: 0.75rem;
max-width: 52rem;
font-size: 0.875rem;
line-height: 1.45;
opacity: 0.85;
}
.proposal-empty-hint a { color: inherit; text-decoration: underline; }
.proposal-empty-hint code {
font-size: 0.83em;
font-family: 'DM Mono', monospace;
}
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
.app { margin: 14px auto; padding: 12px; }
.app-header { border-radius: 16px; padding: 16px 14px; }
.results-ledger { gap: 10px; }
.paragraph-result-header { padding: 10px 12px; }
.results-table--in-card { display: table; width: 100%; }
.results-table--in-card thead { display: table-header-group; }
.results-table--in-card tbody { display: table-row-group; }
.results-table--in-card tr { display: table-row; }
.results-table--in-card th,
.results-table--in-card td { display: table-cell; padding: 8px 10px; }
.results-table--in-card tbody tr { border-bottom: 1px solid var(--border-subtle); }
.results-table--in-card tbody tr:last-child { border-bottom: none; }
}