spb/hfchart Public

1/* ============================================================================2 * HFChart — styles & tokens (clair par défaut, sombre sélectionné, pas dérivé)3 * Author : Simon-Pierre Boucher — contact@spboucher.ai4 * ----------------------------------------------------------------------------5 * Les couleurs de séries suivent la palette catégorielle validée (ordre FIXE).6 * Hausse/baisse : schéma "classic" (vert/rouge, avec encodage secondaire par7 * la géométrie des chandelles) ou "cvd" (bleu/rouge, validé CVD ΔE 19,2).8 * ==========================================================================*/910:root {11  color-scheme: light;12  --page: #f4f4f2;13  --surface: #fcfcfb;14  --ink: #0b0b0b;15  --ink2: #52514e;16  --muted: #898781;17  --grid: #e1e0d9;18  --axis: #c3c2b7;19  --border: rgba(11, 11, 11, 0.10);20  --chip: #0b0b0b;21  --chip-text: #ffffff;22  --series-1: #2a78d6;23  --series-2: #eb6834;24  --series-3: #1baf7a;25  --series-4: #eda100;26  --series-5: #e87ba4;27  --series-6: #008300;28  --series-7: #4a3aa7;29  --series-8: #e34948;30  --up: #0ca30c;31  --dn: #d03b3b;32  --accent-ui: #2a78d6;33}3435:root[data-theme="dark"] {36  color-scheme: dark;37  --page: #0d0d0d;38  --surface: #1a1a19;39  --ink: #ffffff;40  --ink2: #c3c2b7;41  --muted: #898781;42  --grid: #2c2c2a;43  --axis: #383835;44  --border: rgba(255, 255, 255, 0.10);45  --chip: #ffffff;46  --chip-text: #0b0b0b;47  --series-1: #3987e5;48  --series-2: #d95926;49  --series-3: #199e70;50  --series-4: #c98500;51  --series-5: #d55181;52  --series-6: #008300;53  --series-7: #9085e9;54  --series-8: #e66767;55  --up: #0ca30c;56  --dn: #d03b3b;57  --accent-ui: #3987e5;58}5960/* Schéma hausse/baisse CVD-sûr (paire divergente bleu↔rouge validée). */61:root[data-scheme="cvd"] { --up: #2a78d6; --dn: #e34948; }62:root[data-theme="dark"][data-scheme="cvd"] { --up: #3987e5; --dn: #e66767; }6364* { box-sizing: border-box; }6566html, body {67  margin: 0;68  height: 100%;69  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;70  background: var(--page);71  color: var(--ink);72}7374body { display: flex; flex-direction: column; }7576a { color: var(--accent-ui); text-decoration: none; }77a:hover { text-decoration: underline; }78.dim { color: var(--muted); }7980/* ------------------------------------------------------------------ topbar */81#topbar {82  display: flex;83  align-items: center;84  gap: 8px;85  padding: 8px 12px;86  background: var(--surface);87  border-bottom: 1px solid var(--border);88  flex-wrap: wrap;89}9091.brand { display: flex; align-items: center; gap: 8px; margin-right: 8px; }92.brand .logo {93  background: var(--accent-ui);94  color: #fff;95  font-weight: 700;96  font-size: 11px;97  padding: 3px 6px;98  border-radius: 6px;99  letter-spacing: 0.5px;100}101.brand strong { font-size: 15px; }102.brand .provider {103  font-size: 11px;104  color: var(--muted);105  border: 1px solid var(--border);106  border-radius: 999px;107  padding: 2px 9px;108}109.brand .provider:hover { color: var(--accent-ui); text-decoration: none; }110111button, select, input[type="search"], input[type="number"] {112  font: inherit;113  color: var(--ink);114  background: var(--surface);115  border: 1px solid var(--border);116  border-radius: 7px;117  padding: 5px 10px;118  cursor: pointer;119}120select { cursor: pointer; }121button:hover:not(:disabled), select:hover { border-color: var(--accent-ui); }122button:disabled { opacity: 0.35; cursor: not-allowed; }123button.active { background: var(--accent-ui); color: #fff; border-color: var(--accent-ui); }124125.seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }126.seg button { border: none; border-radius: 0; padding: 5px 9px; }127.seg button + button { border-left: 1px solid var(--border); }128129.dropdown { position: relative; }130.dropdown .menu {131  display: none;132  position: absolute;133  top: calc(100% + 4px);134  left: 0;135  z-index: 40;136  min-width: 240px;137  background: var(--surface);138  border: 1px solid var(--border);139  border-radius: 10px;140  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);141  padding: 8px;142  max-height: 60vh;143  overflow: auto;144}145.dropdown.open .menu { display: block; }146.dropdown .menu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }147.dropdown .menu label:hover { background: var(--page); }148.dropdown .menu em { color: var(--muted); font-style: normal; font-size: 11px; margin-left: auto; }149.param-row { justify-content: space-between; }150.param-row input { width: 90px; cursor: text; }151152/* ------------------------------------------------------------------ layout */153#layout { display: flex; flex: 1; min-height: 0; }154155#sidebar {156  width: 218px;157  flex: none;158  display: flex;159  flex-direction: column;160  gap: 8px;161  padding: 10px;162  background: var(--surface);163  border-right: 1px solid var(--border);164  min-height: 0;165}166#group-tabs { display: flex; flex-wrap: wrap; gap: 4px; }167#group-tabs button { padding: 3px 8px; font-size: 12px; border-radius: 999px; }168#search { cursor: text; }169#symbols {170  list-style: none;171  margin: 0;172  padding: 0;173  overflow-y: auto;174  flex: 1;175  min-height: 0;176  border-top: 1px solid var(--border);177}178#symbols li {179  padding: 4px 8px;180  border-radius: 6px;181  cursor: pointer;182  font-variant-numeric: tabular-nums;183}184#symbols li:hover { background: var(--page); }185#symbols li.active { background: var(--accent-ui); color: #fff; }186#symbols li.compared { outline: 2px solid var(--accent-ui); outline-offset: -2px; }187#sym-count { margin: 0; font-size: 11px; }188.hint {189  margin: 0;190  font-size: 11.5px;191  color: var(--ink2);192  background: var(--page);193  border: 1px solid var(--border);194  border-radius: 7px;195  padding: 6px 8px;196  display: none;197}198199#chart-area { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; }200#chart-wrap { position: relative; flex: 1; min-height: 0; background: var(--surface); }201#chart-wrap.loading::after {202  content: "";203  position: absolute;204  top: 10px; right: 84px;205  width: 14px; height: 14px;206  border: 2px solid var(--grid);207  border-top-color: var(--accent-ui);208  border-radius: 50%;209  animation: spin 0.8s linear infinite;210  z-index: 5;211}212@keyframes spin { to { transform: rotate(360deg); } }213214#legend {215  position: absolute;216  top: 8px; left: 10px;217  z-index: 4;218  display: flex;219  align-items: center;220  gap: 8px;221  flex-wrap: wrap;222  pointer-events: none;223  font-size: 12.5px;224  background: color-mix(in srgb, var(--surface) 74%, transparent);225  backdrop-filter: blur(8px) saturate(1.2);226  -webkit-backdrop-filter: blur(8px) saturate(1.2);227  border: 1px solid var(--border);228  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);229  border-radius: 9px;230  padding: 4px 10px;231  max-width: calc(100% - 110px);232}233#legend .sym { font-weight: 700; font-size: 14px; }234#legend .k { color: var(--muted); margin-right: 1px; }235#legend b.up { color: var(--up); font-weight: 600; }236#legend b.dn { color: var(--dn); font-weight: 600; }237#legend #ohlcv { font-variant-numeric: tabular-nums; }238.chip-sym { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }239.chip-sym i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }240241#footer {242  padding: 5px 12px;243  font-size: 11px;244  color: var(--muted);245  background: var(--surface);246  border-top: 1px solid var(--border);247}248249/* ------------------------------------------------------------------ panels */250.overlay-panel {251  display: none;252  position: fixed;253  inset: 0;254  z-index: 60;255  background: rgba(0, 0, 0, 0.42);256  padding: 4vh 4vw;257}258.overlay-panel.open { display: flex; }259.overlay-panel .panel {260  margin: auto;261  width: min(1100px, 100%);262  max-height: 92vh;263  overflow: auto;264  background: var(--page);265  border: 1px solid var(--border);266  border-radius: 14px;267  padding: 16px 20px;268}269.panel-head { display: flex; align-items: center; justify-content: space-between; }270.panel-head h2 { margin: 0; font-size: 17px; }271272#gallery-grid {273  display: grid;274  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));275  gap: 12px;276  margin-top: 12px;277}278.g-card {279  display: flex;280  flex-direction: column;281  gap: 4px;282  text-align: left;283  padding: 10px;284  border-radius: 10px;285  background: var(--surface);286}287.g-card canvas { width: 100%; height: 96px; display: block; }288.g-card strong { font-size: 13px; }289.g-card span { font-size: 11px; color: var(--muted); }290.g-card.active {291  /* neutralise le style bouton .active (fond bleu) : la sélection se marque292     par un anneau, le mini-chart garde ses couleurs lisibles */293  background: var(--surface);294  color: inherit;295  border-color: var(--border);296  outline: 2px solid var(--accent-ui);297  outline-offset: 1px;298}299300.table-scroll { overflow: auto; max-height: 74vh; margin-top: 10px; }301#table-view table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }302#table-view th, #table-view td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--border); }303#table-view th:first-child, #table-view td:first-child { text-align: left; }304#table-view th { position: sticky; top: 0; background: var(--page); color: var(--ink2); }305306/* ------------------------------------------------------------------ toast */307.toast {308  position: fixed;309  bottom: 40px;310  left: 50%;311  transform: translate(-50%, 20px);312  background: var(--chip);313  color: var(--chip-text);314  padding: 8px 16px;315  border-radius: 9px;316  opacity: 0;317  pointer-events: none;318  transition: opacity 0.2s, transform 0.2s;319  z-index: 90;320  max-width: 80vw;321}322.toast.show { opacity: 1; transform: translate(-50%, 0); }323.toast.err { background: #d03b3b; color: #fff; }324325/* ------------------------------------------------------------------ export */326#export-code {327  width: 100%;328  height: 260px;329  margin-top: 10px;330  font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;331  color: var(--ink);332  background: var(--surface);333  border: 1px solid var(--border);334  border-radius: 8px;335  padding: 10px;336  resize: vertical;337  white-space: pre;338  cursor: text;339}340.export-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }341button.primary { background: var(--accent-ui); color: #fff; border-color: var(--accent-ui); }342#export-tabs { margin-top: 10px; }343#export-note { margin: 10px 0 0; }344345/* ------------------------------------------------------------------ embed (iframe ?embed=1) */346body.embed #topbar, body.embed #sidebar, body.embed #footer { display: none; }347body.embed #layout { height: 100vh; }348349/* ------------------------------------------------------------------ mobile */350#btn-symbols { display: none; }351352@media (max-width: 900px) {353  .brand .provider { display: none; }354}355356@media (max-width: 760px) {357  #topbar {358    flex-wrap: nowrap;359    overflow-x: auto;360    -webkit-overflow-scrolling: touch;361    gap: 6px;362    padding: 6px 8px;363    scrollbar-width: none;364  }365  #topbar::-webkit-scrollbar { display: none; }366  #topbar button, #topbar select { padding: 6px 9px; flex: none; }367  .brand { margin-right: 2px; }368  .brand strong { display: none; }369  .seg { flex: none; }370371  #btn-symbols { display: inline-block; font-size: 16px; padding: 5px 10px; }372  #sidebar {373    position: fixed;374    top: 0; bottom: 0; left: 0;375    width: min(300px, 84vw);376    z-index: 55;377    transform: translateX(-105%);378    transition: transform 0.22s ease;379    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25);380    border-right: 1px solid var(--border);381  }382  body.drawer-open #sidebar { transform: none; }383  #drawer-backdrop {384    display: none;385    position: fixed;386    inset: 0;387    z-index: 54;388    background: rgba(0, 0, 0, 0.35);389  }390  body.drawer-open #drawer-backdrop { display: block; }391  #symbols li { padding: 9px 10px; }        /* cibles tactiles ≥ 36px */392  #group-tabs button { padding: 6px 11px; }393394  #legend { font-size: 11.5px; gap: 6px; max-width: calc(100% - 70px); }395  #legend .sym { font-size: 13px; }396  .overlay-panel { padding: 2vh 2vw; }397  .overlay-panel .panel { padding: 12px 14px; max-height: 96vh; }398  #gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }399  .g-card canvas { height: 74px; }400  #footer { display: none; }401  #export-code { height: 200px; font-size: 10.5px; }402}403