spb/hfchart Public

1/* ============================================================================2 * HFChart Options Lab — styles (s'appuie sur les tokens de style.css)3 * Author : Simon-Pierre Boucher — contact@spboucher.ai4 * ==========================================================================*/56#options-lab { display: flex; flex-direction: column; height: 100%; }78#options-lab #topbar { align-items: center; }9#options-lab .ctl { display: flex; align-items: center; gap: 6px; }10#options-lab .ctl label { font-size: 11px; color: var(--muted); }11#options-lab .ctl input { cursor: text; }12.flex-spacer { flex: 1; }13.spot-chip {14  font-variant-numeric: tabular-nums;15  font-weight: 600;16  background: var(--page);17  border: 1px solid var(--border);18  border-radius: 999px;19  padding: 3px 11px;20}21.spot-chip:empty { display: none; }2223#ol-layout {24  display: flex;25  flex: 1;26  min-height: 0;27  gap: 0;28}2930/* ------------------------------------------------------------------ chaîne */31#ol-chain {32  flex: 1.25;33  min-width: 0;34  display: flex;35  flex-direction: column;36  background: var(--surface);37  border-right: 1px solid var(--border);38}39.expiry-tabs {40  display: flex;41  gap: 4px;42  overflow-x: auto;43  padding: 8px 10px 4px;44  scrollbar-width: thin;45  flex: none;46}47.expiry-tabs button {48  flex: none;49  font-size: 11.5px;50  padding: 3px 9px;51  border-radius: 999px;52  font-variant-numeric: tabular-nums;53}54.chain-filters {55  display: flex;56  align-items: center;57  gap: 16px;58  padding: 6px 12px;59  border-bottom: 1px solid var(--border);60  flex: none;61  font-size: 11.5px;62  color: var(--ink2);63  flex-wrap: wrap;64}65.chain-filters input[type="range"] { width: 110px; vertical-align: middle; }66.chain-filters b { font-variant-numeric: tabular-nums; display: inline-block; min-width: 34px; }6768#chain-scroll { flex: 1; overflow: auto; min-height: 0; }69#chain-table {70  border-collapse: collapse;71  width: 100%;72  font-size: 11.5px;73  font-variant-numeric: tabular-nums;74}75#chain-table th {76  position: sticky;77  top: 0;78  z-index: 2;79  background: var(--surface);80  color: var(--muted);81  font-weight: 600;82  padding: 5px 7px;83  border-bottom: 1px solid var(--border);84  text-align: right;85  white-space: nowrap;86}87#chain-table th.side-head { text-align: center; color: var(--ink2); border-bottom: none; }88#chain-table td {89  padding: 3px 7px;90  text-align: right;91  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);92  white-space: nowrap;93}94#chain-table td.strike {95  text-align: center;96  font-weight: 700;97  background: var(--page);98  border-left: 1px solid var(--border);99  border-right: 1px solid var(--border);100}101#chain-table td.px { cursor: pointer; font-weight: 600; }102#chain-table td.px:hover { outline: 2px solid var(--accent-ui); outline-offset: -2px; border-radius: 4px; }103#chain-table tr.itm-c td.c-side { background: color-mix(in srgb, var(--up) 7%, transparent); }104#chain-table tr.itm-p td.p-side { background: color-mix(in srgb, var(--dn) 7%, transparent); }105#chain-table tr.spot-row td {106  border-top: 2px dashed var(--accent-ui);107}108#chain-table td.in-pos { position: relative; }109#chain-table td.in-pos::before {110  content: "●";111  position: absolute;112  left: 2px;113  font-size: 8px;114  color: var(--accent-ui);115}116.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }117118/* menu achat/vente sur clic d'un prix */119.trade-pop {120  position: fixed;121  z-index: 80;122  background: var(--surface);123  border: 1px solid var(--border);124  border-radius: 10px;125  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);126  padding: 8px;127  display: flex;128  gap: 6px;129  align-items: center;130  font-size: 12px;131}132.trade-pop .buy { background: var(--up); color: #fff; border-color: var(--up); }133.trade-pop .sell { background: var(--dn); color: #fff; border-color: var(--dn); }134135/* ------------------------------------------------------------------ labo */136#ol-lab {137  flex: 1;138  min-width: 380px;139  overflow-y: auto;140  padding: 12px;141  display: flex;142  flex-direction: column;143  gap: 12px;144  background: var(--page);145}146.lab-block {147  background: var(--surface);148  border: 1px solid var(--border);149  border-radius: 12px;150  padding: 12px 14px;151}152.lab-block h2 { margin: 0 0 8px; font-size: 14px; }153.lab-head { display: flex; align-items: center; gap: 8px; }154.lab-head h2 { flex: 1; margin: 0; }155156#legs-list { list-style: none; margin: 8px 0 0; padding: 0; }157#legs-list li {158  display: flex;159  align-items: center;160  gap: 8px;161  padding: 6px 4px;162  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);163  font-size: 12.5px;164  font-variant-numeric: tabular-nums;165}166#legs-list .side {167  font-weight: 700;168  font-size: 10.5px;169  padding: 2px 7px;170  border-radius: 999px;171  color: #fff;172}173#legs-list .side.long { background: var(--up); }174#legs-list .side.short { background: var(--dn); }175#legs-list .desc { flex: 1; }176#legs-list .desc small { color: var(--muted); }177#legs-list .qty-ctl { display: flex; align-items: center; gap: 3px; }178#legs-list .qty-ctl button { padding: 1px 7px; font-size: 13px; line-height: 1.3; }179#legs-list .rm { color: var(--dn); border-color: transparent; background: none; font-size: 14px; }180181.metrics-grid {182  display: grid;183  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));184  gap: 8px;185}186.metric {187  background: var(--page);188  border: 1px solid var(--border);189  border-radius: 9px;190  padding: 7px 10px;191}192.metric .k { font-size: 10.5px; color: var(--muted); display: block; }193.metric .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }194.metric .v.up { color: var(--up); }195.metric .v.dn { color: var(--dn); }196197.greeks-row {198  display: flex;199  gap: 14px;200  flex-wrap: wrap;201  margin-top: 10px;202  font-size: 12px;203  font-variant-numeric: tabular-nums;204}205.greeks-row span b { font-weight: 700; }206.greeks-row .k { color: var(--muted); }207208.chart-box { position: relative; width: 100%; height: 260px; }209.chart-box canvas { position: absolute; inset: 0; }210211#replay-slider { width: 100%; margin-top: 8px; cursor: pointer; }212.replay-readout {213  display: flex;214  gap: 16px;215  flex-wrap: wrap;216  font-size: 12.5px;217  font-variant-numeric: tabular-nums;218  margin-top: 6px;219}220.replay-readout .k { color: var(--muted); }221.replay-readout b.up { color: var(--up); }222.replay-readout b.dn { color: var(--dn); }223224#options-lab #footer { font-size: 11px; }225226/* ------------------------------------------------------------------ mobile */227@media (max-width: 900px) {228  #ol-layout { flex-direction: column; overflow-y: auto; }229  #ol-chain { border-right: none; border-bottom: 1px solid var(--border); max-height: 54vh; flex: none; }230  #ol-lab { min-width: 0; overflow: visible; }231  /* colonnes réduites : on masque OI/Vol/IV, on garde Δ + bid/ask/mid */232  #chain-table .xtra { display: none; }233  #options-lab .ctl label { display: none; }234}235