Spaces:
Running
Running
| :root { | |
| color-scheme: light; | |
| font-family: Roboto, "Segoe UI", Arial, sans-serif; | |
| font-synthesis: none; | |
| } | |
| * { box-sizing: border-box; } | |
| [hidden] { display: none ; } | |
| body { | |
| --surface: #fff; | |
| --background: #fafafa; | |
| --text: #252525; | |
| --subtle: #737373; | |
| --border: #e1e1e1; | |
| --shadow: 0 2px 5px rgba(0, 0, 0, .16); | |
| --hover: #f0f1f2; | |
| margin: 0; | |
| background: var(--background); | |
| color: var(--text); | |
| min-height: 100vh; | |
| } | |
| body.dark { | |
| --surface: #424242; | |
| --background: #303030; | |
| --text: #f0f0f0; | |
| --subtle: #c1c1c1; | |
| --border: #575757; | |
| --shadow: 0 2px 6px rgba(0, 0, 0, .35); | |
| --hover: #505050; | |
| color-scheme: dark; | |
| } | |
| button, input, select { font: inherit; } | |
| button { cursor: pointer; } | |
| button:disabled { cursor: default; opacity: .35; } | |
| button:focus-visible, input:focus-visible, select:focus-visible { | |
| outline: 2px solid #1976d2; | |
| outline-offset: 2px; | |
| } | |
| .app-bar { | |
| align-items: center; | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| gap: 12px; | |
| height: 64px; | |
| padding: 0 18px 0 10px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| } | |
| .icon-button { | |
| align-items: center; | |
| background: transparent; | |
| border: 0; | |
| border-radius: 50%; | |
| color: var(--text); | |
| display: inline-flex; | |
| height: 40px; | |
| justify-content: center; | |
| min-width: 40px; | |
| padding: 8px; | |
| } | |
| .icon-button:not(:disabled):hover { background: var(--hover); } | |
| .icon-button svg, .square-button svg { | |
| fill: none; | |
| height: 21px; | |
| stroke: currentColor; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-width: 2; | |
| width: 21px; | |
| } | |
| .brand-icon { height: 31px; object-fit: contain; width: 31px; } | |
| .brand-name { font-size: 18px; font-weight: 500; letter-spacing: .01em; } | |
| .brand-divider { background: var(--border); height: 25px; margin: 0 6px; width: 1px; } | |
| .project-name { font-size: 15px; white-space: nowrap; } | |
| .project-name strong { font-weight: 600; text-transform: capitalize; } | |
| .project-separator { color: #a0a0a0; padding: 0 5px; } | |
| .header-spacer { flex: 1; } | |
| .read-only-badge { color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .13em; white-space: nowrap; } | |
| .theme-button { margin-left: 13px; } | |
| .drawer-scrim { | |
| background: rgba(0, 0, 0, .34); | |
| inset: 64px 0 0; | |
| position: fixed; | |
| z-index: 25; | |
| } | |
| .project-drawer { | |
| background: var(--surface); | |
| bottom: 0; | |
| box-shadow: var(--shadow); | |
| left: 0; | |
| overflow-y: auto; | |
| position: fixed; | |
| top: 64px; | |
| width: 278px; | |
| z-index: 26; | |
| } | |
| .drawer-heading { border-bottom: 1px solid var(--border); font-size: 18px; font-weight: 600; padding: 22px 20px; } | |
| .drawer-heading span { color: var(--subtle); display: block; font-size: 12px; font-weight: 400; margin-top: 5px; } | |
| .drawer-subheading { color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 25px 20px 10px; } | |
| .drawer-item { | |
| align-items: center; | |
| background: transparent; | |
| border: 0; | |
| color: var(--text); | |
| display: flex; | |
| font-size: 14px; | |
| gap: 14px; | |
| height: 48px; | |
| padding: 0 21px; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .drawer-item:hover, .drawer-item.active { background: var(--hover); } | |
| .drawer-item.active { color: #1976d2; font-weight: 600; } | |
| .drawer-dot { border-radius: 50%; height: 9px; width: 9px; } | |
| .train-dot { background: #1976d2; } | |
| .dev-dot { background: #00897b; } | |
| .test-dot { background: #ef6c00; } | |
| .drawer-count { color: var(--subtle); font-size: 12px; margin-left: auto; } | |
| .main-content { min-width: 0; } | |
| .toolbar { | |
| align-items: center; | |
| background: var(--background); | |
| display: flex; | |
| gap: 12px; | |
| justify-content: space-between; | |
| min-height: 63px; | |
| padding: 9px 14px; | |
| position: sticky; | |
| top: 64px; | |
| z-index: 10; | |
| } | |
| .toolbar-start, .pager { align-items: center; display: flex; gap: 7px; min-width: 0; } | |
| .split-selector { | |
| align-items: center; | |
| background: var(--surface); | |
| border: 1px solid #373737; | |
| border-radius: 4px; | |
| display: flex; | |
| height: 38px; | |
| margin-right: 4px; | |
| padding: 0 9px; | |
| } | |
| body.dark .split-selector { border-color: #bababa; } | |
| .split-selector label { color: var(--subtle); font-size: 12px; margin-right: 6px; white-space: nowrap; } | |
| .split-selector select { | |
| appearance: none; | |
| background: transparent; | |
| border: 0; | |
| color: var(--text); | |
| font-size: 14px; | |
| font-weight: 600; | |
| min-width: 75px; | |
| outline: 0; | |
| padding: 4px 19px 4px 3px; | |
| } | |
| .split-selector::after { | |
| border-bottom: 1.5px solid currentColor; | |
| border-right: 1.5px solid currentColor; | |
| content: ""; | |
| height: 6px; | |
| margin-left: -12px; | |
| pointer-events: none; | |
| transform: rotate(45deg) translateY(-2px); | |
| width: 6px; | |
| } | |
| .square-button { | |
| align-items: center; | |
| background: var(--surface); | |
| border: 1px solid #373737; | |
| border-radius: 4px; | |
| color: var(--text); | |
| display: inline-flex; | |
| height: 38px; | |
| justify-content: center; | |
| min-width: 38px; | |
| padding: 7px; | |
| } | |
| body.dark .square-button { border-color: #bababa; } | |
| .square-button:hover, .square-button.active { background: var(--hover); } | |
| .search-container input { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| color: var(--text); | |
| height: 38px; | |
| padding: 0 11px; | |
| width: min(30vw, 330px); | |
| } | |
| .match-count { color: var(--subtle); font-size: 12px; margin-left: 5px; white-space: nowrap; } | |
| .pager { justify-content: flex-end; white-space: nowrap; } | |
| .page-label, .page-total { color: var(--subtle); font-size: 13px; } | |
| .page-input { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| color: var(--text); | |
| font-size: 13px; | |
| height: 32px; | |
| text-align: center; | |
| width: 56px; | |
| } | |
| .page-input::-webkit-inner-spin-button, .page-input::-webkit-outer-spin-button { appearance: none; margin: 0; } | |
| .pager-divider { background: var(--border); height: 23px; margin: 0 5px; width: 1px; } | |
| .pager-button { font-size: 28px; font-weight: 300; height: 35px; line-height: 1; min-width: 35px; padding: 0 0 4px; } | |
| .workspace { | |
| align-items: start; | |
| display: grid; | |
| gap: 24px; | |
| grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); | |
| padding: 0 12px 34px; | |
| } | |
| .workspace.hide-info { grid-template-columns: minmax(0, 1fr); } | |
| .workspace.hide-info .side-column { display: none; } | |
| .document-column, .side-column { min-width: 0; } | |
| .section-heading { align-items: center; color: var(--subtle); display: flex; font-size: 11px; font-weight: 700; gap: 10px; height: 25px; letter-spacing: .1em; padding: 0 2px 9px; } | |
| .heading-marker { background: #1976d2; border-radius: 2px; height: 10px; width: 3px; } | |
| .heading-rule { background: var(--border); flex: 1; height: 1px; } | |
| #document-position { letter-spacing: 0; } | |
| .document-card, .panel-card { background: var(--surface); border-radius: 3px; box-shadow: var(--shadow); } | |
| .document-card { min-height: 272px; } | |
| .document-meta-bar { align-items: center; border-bottom: 1px solid var(--border); color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 12px; gap: 11px; min-height: 53px; padding: 10px 19px; } | |
| .document-id-label { color: #1976d2; font-size: 10px; font-weight: 800; letter-spacing: .09em; } | |
| .document-meta-bar strong { color: var(--text); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; } | |
| .status-chip { background: #e8f5e9; border-radius: 3px; color: #278049; font-size: 10px; font-weight: 700; letter-spacing: .06em; margin-left: auto; padding: 5px 7px; white-space: nowrap; } | |
| body.dark .status-chip { background: #254d34; color: #a1e6ba; } | |
| .annotated-text { color: #686868; font-size: 19px; font-weight: 600; line-height: 2.32; min-height: 203px; overflow-wrap: anywhere; padding: 23px 19px 28px; } | |
| body.dark .annotated-text { color: #d3d3d3; } | |
| .entity { | |
| border: 2px solid var(--entity-color); | |
| border-bottom: 0; | |
| border-radius: 1px 1px 0 0; | |
| display: inline-block; | |
| line-height: 1.05; | |
| margin: 0 2px 5px; | |
| max-width: 100%; | |
| transition: opacity .16s ease, filter .16s ease; | |
| vertical-align: middle; | |
| } | |
| .entity-text { display: block; padding: 2px 5px 1px; } | |
| .entity-tag { background: var(--entity-color); color: var(--entity-ink); display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.12; padding: 2px 5px; text-align: center; } | |
| .entity.dimmed { opacity: .25; } | |
| .entity:hover { filter: brightness(.94); } | |
| body.dark .entity:hover { filter: brightness(1.2); } | |
| .empty-state { color: var(--subtle); font-size: 15px; font-weight: 400; line-height: 1.55; } | |
| .keyboard-hint { color: var(--subtle); font-size: 12px; margin: 16px 3px; } | |
| kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-family: inherit; font-size: 11px; padding: 2px 5px; } | |
| .side-column { padding-top: 25px; } | |
| .panel-card { margin-bottom: 17px; } | |
| .panel-title { align-items: center; border-bottom: 1px solid var(--border); display: flex; font-size: 15px; font-weight: 500; justify-content: space-between; min-height: 48px; padding: 10px 16px; } | |
| .panel-count { color: var(--subtle); font-size: 12px; font-weight: 400; } | |
| .label-list { display: flex; flex-wrap: wrap; gap: 9px; min-height: 65px; padding: 16px; } | |
| .label-chip { align-items: center; border: 0; border-radius: 4px; color: #fff; display: inline-flex; font-size: 12px; font-weight: 700; gap: 10px; min-height: 29px; padding: 5px 9px; transition: opacity .16s; } | |
| .label-chip.inactive { opacity: .4; } | |
| .label-chip:focus-visible { outline-color: var(--text); } | |
| .label-chip .chip-count { background: rgba(0, 0, 0, .16); border-radius: 3px; font-size: 11px; min-width: 17px; padding: 1px 4px; } | |
| .label-empty { color: var(--subtle); font-size: 12px; } | |
| .metadata-table { border-collapse: collapse; font-size: 12px; table-layout: fixed; text-align: left; width: 100%; } | |
| .metadata-table th { color: var(--subtle); font-weight: 600; height: 42px; } | |
| .metadata-table td { height: 42px; overflow-wrap: anywhere; } | |
| .metadata-table tr { border-bottom: 1px solid var(--border); } | |
| .metadata-table tbody tr:last-child { border-bottom: 0; } | |
| .metadata-table th:first-child, .metadata-table td:first-child { padding-left: 16px; width: 38%; } | |
| .metadata-table th:last-child, .metadata-table td:last-child { padding-right: 13px; } | |
| .progress-card { padding-bottom: 17px; } | |
| .progress-text { color: var(--subtle); font-size: 12px; font-weight: 400; } | |
| .progress-track { background: var(--border); border-radius: 4px; height: 7px; margin: 18px 16px 1px; overflow: hidden; } | |
| .progress-fill { background: #1976d2; border-radius: inherit; height: 100%; transition: width .2s; width: 0; } | |
| @media (max-width: 950px) { | |
| .workspace { gap: 16px; grid-template-columns: minmax(0, 1fr); } | |
| .side-column { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; } | |
| .side-column .panel-card { margin: 0; } | |
| .progress-card { grid-column: 1 / -1; } | |
| } | |
| @media (max-width: 650px) { | |
| .app-bar { gap: 7px; padding-right: 9px; } | |
| .brand-name, .brand-divider, .read-only-badge { display: none; } | |
| .project-name { font-size: 14px; } | |
| .toolbar { align-items: stretch; flex-direction: column; gap: 7px; padding: 8px 12px; } | |
| .toolbar-start { flex-wrap: wrap; } | |
| .search-container { order: 5; width: 100%; } | |
| .search-container input { width: 100%; } | |
| .pager { justify-content: flex-end; } | |
| .workspace { padding: 0 10px 25px; } | |
| .side-column { display: block; } | |
| .side-column .panel-card { margin-bottom: 14px; } | |
| .annotated-text { font-size: 17px; line-height: 2.48; padding: 18px 13px 25px; } | |
| .document-meta-bar { padding: 10px 13px; } | |
| .keyboard-hint { line-height: 1.6; } | |
| } | |