|
|
|
|
|
|
|
|
|
|
|
.plot-card { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; margin: 8px 0; } |
|
|
.plot-card svg text { fill: var(--text-color) !important; } |
|
|
.plot-card label { color: var(--text-color) !important; } |
|
|
.plotly-graph-div { width: 100% !important; min-height: 320px; } |
|
|
@media (max-width: 768px) { .plotly-graph-div { min-height: 260px; } } |
|
|
[id^="plot-"] { display: flex; flex-direction: column; align-items: center; gap: 15px; } |
|
|
.plotly_caption { font-style: italic; margin-top: 10px; } |
|
|
.plotly_controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } |
|
|
.plotly_input_container { display: flex; align-items: center; flex-direction: column; gap: 10px; } |
|
|
.plotly_input_container > select { padding: 2px 4px; line-height: 1.5em; text-align: center; border-radius: 4px; font-size: 12px; background-color: var(--neutral-200); outline: none; border: 1px solid var(--neutral-300); } |
|
|
.plotly_slider { display: flex; align-items: center; gap: 10px; } |
|
|
.plotly_slider > input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; background: var(--neutral-400); border-radius: 5px; outline: none; } |
|
|
.plotly_slider > input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } |
|
|
.plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } |
|
|
.plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[data-theme="dark"] .plot-card .xaxislayer-above text, |
|
|
[data-theme="dark"] .plot-card .yaxislayer-above text, |
|
|
[data-theme="dark"] .plot-card .infolayer text, |
|
|
[data-theme="dark"] .plot-card .legend text, |
|
|
[data-theme="dark"] .plot-card .annotation text, |
|
|
[data-theme="dark"] .plot-card .colorbar text, |
|
|
[data-theme="dark"] .plot-card .hoverlayer text { fill: #fff !important; } |
|
|
|
|
|
[data-theme="dark"] .plot-card .xaxislayer-above path, |
|
|
[data-theme="dark"] .plot-card .yaxislayer-above path, |
|
|
[data-theme="dark"] .plot-card .xlines-above, |
|
|
[data-theme="dark"] .plot-card .ylines-above { stroke: rgba(255,255,255,.35) !important; } |
|
|
|
|
|
[data-theme="dark"] .plot-card .gridlayer path { stroke: rgba(255,255,255,.15) !important; } |
|
|
|
|
|
|
|
|
[data-theme="dark"] .plot-card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; } |
|
|
[data-theme="dark"] .plot-card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; } |
|
|
|
|
|
|
|
|
[data-theme="dark"] .plot-card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; } |
|
|
|
|
|
|
|
|
|
