website: start containing lc code in wrapper

This commit is contained in:
nym21
2024-12-03 17:31:56 +01:00
parent 141cd819a1
commit 783aed5826
10 changed files with 535 additions and 489 deletions

View File

@@ -968,76 +968,135 @@
pointer-events: none;
}
.chart > .panes {
position: relative;
.chart {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
> .pane {
z-index: 20;
position: relative;
min-height: 0px;
width: 100%;
cursor: crosshair;
height: 100%;
> legend {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: var(--negative-main-padding);
margin-right: var(--negative-main-padding);
padding-left: var(--main-padding);
padding-right: var(--main-padding);
padding-bottom: 1.25rem;
overflow-x: auto;
min-width: 0;
&:has(+ .chart-wrapper:not([hidden])) {
height: calc(100% - 62px);
}
> fieldset {
pointer-events: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
> div {
flex: 0;
display: flex;
align-items: center;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
gap: 0.5rem;
> div.field {
> label {
margin: -0.375rem 0;
color: var(--color);
> span {
display: flex !important;
}
&:has(input:not(:checked)) {
color: var(--off-color);
> span.main > span.name {
text-decoration-thickness: 1.5px;
text-decoration-color: var(--color);
text-decoration-line: line-through;
}
&:hover {
* {
color: var(--off-color) !important;
}
> span.main > span.name {
text-decoration-color: var(--orange) !important;
}
}
}
}
> a {
padding: 0.375rem;
margin: -0.375rem;
}
}
}
> .panes {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
> .pane {
z-index: 20;
position: relative;
min-height: 0px;
width: 100%;
cursor: crosshair;
height: 100%;
&:has(+ .chart-wrapper:not([hidden])) {
height: calc(100% - 62px);
}
> fieldset {
pointer-events: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
display: flex;
align-items: center;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
gap: 0.5rem;
> legend,
> div {
flex-shrink: 0;
}
> hr {
min-width: 1rem;
}
label {
padding: 0.5rem;
margin: -0.5rem;
}
> div {
> div.field {
display: flex;
align-items: center;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
gap: 0.5rem;
> legend,
> div {
flex-shrink: 0;
}
> hr {
min-width: 1rem;
}
label {
padding: 0.5rem;
margin: -0.5rem;
}
> div {
display: flex;
gap: 0.5rem;
}
}
}
> .lightweight-chart {
height: 100%;
margin-right: var(--negative-main-padding);
}
}
> .lightweight-chart {
height: 100%;
margin-right: var(--negative-main-padding);
> .shadow-bottom {
bottom: 1.75rem;
width: 80px;
left: auto;
}
}
> .shadow-bottom {
bottom: 1.75rem;
width: 80px;
left: auto;
}
}
</style>