|
|
| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| background: #f5f5f5; |
| color: #1f2933; |
| } |
|
|
| .container { |
| display: grid; |
| grid-template-columns: 1.2fr 1fr; |
| gap: 20px; |
| padding: 20px; |
| } |
|
|
| .card { |
| background: white; |
| border-radius: 12px; |
| padding: 16px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08); |
| } |
|
|
| .video-card { |
| align-self: start; |
| max-height: calc(100vh - 40px); |
| position: sticky; |
| top: 20px; |
| } |
|
|
| .annotation-card { |
| max-height: calc(100vh - 40px); |
| overflow-y: auto; |
| overscroll-behavior: contain; |
| } |
|
|
| .axis-row { |
| margin-bottom: 20px; |
| border-bottom: 1px solid #eee; |
| padding-bottom: 16px; |
| } |
|
|
| .axis-heading { |
| margin-bottom: 10px; |
| } |
|
|
| .axis-heading h3 { |
| margin: 0 0 4px; |
| } |
|
|
| .axis-heading p, |
| .axis-summary { |
| color: #52606d; |
| line-height: 1.45; |
| margin: 0 0 8px; |
| } |
|
|
| .axis-items { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .axis-item { |
| border: 1px solid #e3e8ef; |
| border-radius: 8px; |
| padding: 12px; |
| } |
|
|
| .axis-item-header h4 { |
| margin: 0 0 4px; |
| } |
|
|
| .axis-item-header p { |
| color: #52606d; |
| line-height: 1.45; |
| margin: 0 0 10px; |
| } |
|
|
| .axis-details { |
| margin: 0 0 8px; |
| padding-left: 18px; |
| color: #52606d; |
| } |
|
|
| .axis-details li { |
| line-height: 1.45; |
| margin-bottom: 4px; |
| } |
|
|
| .label-area { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .label-buttons { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .label-buttons button { |
| margin-right: 0; |
| } |
|
|
| .count-field { |
| display: grid; |
| gap: 6px; |
| font-weight: 700; |
| max-width: 160px; |
| } |
|
|
| .count-field input { |
| font-weight: 400; |
| } |
|
|
| .target-events { |
| display: flex; |
| flex-wrap: wrap; |
| margin-bottom: 12px; |
| } |
|
|
| .annotator-display { |
| background: #f0f4f8; |
| border: 1px solid #d9e2ec; |
| border-radius: 8px; |
| color: #334e68; |
| font-weight: 700; |
| margin: 8px 0 4px; |
| padding: 8px 12px; |
| } |
|
|
| .example-controls { |
| align-items: center; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 14px; |
| margin-bottom: 12px; |
| } |
|
|
| .example-done { |
| align-items: center; |
| display: flex; |
| font-weight: 400; |
| gap: 8px; |
| } |
|
|
| .example-player { |
| max-width: 480px; |
| } |
|
|
| textarea { |
| width: 100%; |
| min-height: 60px; |
| margin-top: 10px; |
| padding: 10px; |
| box-sizing: border-box; |
| } |
|
|
| button { |
| padding: 8px 14px; |
| margin-right: 10px; |
| border-radius: 8px; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| .controls { |
| margin-top: 16px; |
| } |
|
|
| .tag { |
| background: #e9eefc; |
| padding: 6px 10px; |
| border-radius: 999px; |
| display: inline-block; |
| margin-right: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .metadata-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .metadata-row span { |
| background: #f0f4f8; |
| border: 1px solid #d9e2ec; |
| border-radius: 999px; |
| color: #334e68; |
| font-size: 13px; |
| padding: 5px 9px; |
| } |
|
|
| .save-btn { |
| background: black; |
| color: white; |
| } |
|
|
| button:disabled { |
| cursor: not-allowed; |
| opacity: 0.5; |
| } |
|
|
| input { |
| border: 1px solid #c8d0d8; |
| border-radius: 8px; |
| font: inherit; |
| padding: 9px 10px; |
| } |
|
|
| .instructions-page { |
| display: flex; |
| justify-content: center; |
| min-height: 100vh; |
| padding: 32px 20px; |
| box-sizing: border-box; |
| } |
|
|
| .instructions-panel { |
| width: min(980px, 100%); |
| background: white; |
| border: 1px solid #e3e8ef; |
| border-radius: 8px; |
| box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); |
| padding: 28px; |
| } |
|
|
| .instructions-header { |
| border-bottom: 1px solid #e3e8ef; |
| padding-bottom: 20px; |
| } |
|
|
| .instructions-header h1 { |
| margin: 0 0 10px; |
| font-size: 32px; |
| line-height: 1.15; |
| } |
|
|
| .instructions-header p { |
| max-width: 780px; |
| margin: 0; |
| color: #52606d; |
| line-height: 1.55; |
| } |
|
|
| .eyebrow { |
| color: #2550a2 !important; |
| font-size: 13px; |
| font-weight: 700; |
| letter-spacing: 0; |
| margin-bottom: 8px !important; |
| text-transform: uppercase; |
| } |
|
|
| .instructions-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 18px 28px; |
| padding: 22px 0; |
| } |
|
|
| .instructions-grid section { |
| border-bottom: 1px solid #eef2f6; |
| padding-bottom: 8px; |
| } |
|
|
| .instructions-grid h2 { |
| font-size: 18px; |
| margin: 0 0 10px; |
| } |
|
|
| .instructions-grid ul { |
| margin: 0; |
| padding-left: 20px; |
| } |
|
|
| .instructions-grid li { |
| line-height: 1.45; |
| margin-bottom: 8px; |
| } |
|
|
| .rationale-examples { |
| color: #52606d; |
| font-style: italic; |
| line-height: 1.45; |
| margin: 6px 0 0; |
| } |
|
|
| .start-panel { |
| display: grid; |
| gap: 14px; |
| border-top: 1px solid #e3e8ef; |
| padding-top: 20px; |
| } |
|
|
| .name-field, |
| .inline-field { |
| display: grid; |
| gap: 6px; |
| font-weight: 700; |
| } |
|
|
| .name-field { |
| max-width: 360px; |
| } |
|
|
| .inline-field { |
| margin-top: 8px; |
| } |
|
|
| .confirmation-row { |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| line-height: 1.4; |
| } |
|
|
| .confirmation-row input { |
| margin-top: 2px; |
| } |
|
|
| .start-btn { |
| justify-self: start; |
| margin-right: 0; |
| } |
|
|
| @media (max-width: 820px) { |
| .container, |
| .instructions-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .video-card, |
| .annotation-card { |
| max-height: none; |
| overflow: visible; |
| position: static; |
| } |
|
|
| .instructions-panel { |
| padding: 20px; |
| } |
|
|
| .instructions-header h1 { |
| font-size: 26px; |
| } |
| } |
|
|
