Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-04-24 14:49:58 -07:00
Code Issues Packages Projects Releases Wiki Activity

website: chart style changes

Browse Source
This commit is contained in:
nym21
2026-02-11 12:22:32 +01:00
parent 1d63b8901d
commit 121928bc57
11 changed files with 448 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
website/styles/components.css
View File

@@ -19,6 +19,10 @@ nav {
color: var(--color);
}
> details > summary > small {
opacity: 1;
}
> a::after,
> details:not([open]) > summary::after {
color: var(--orange) !important;
@@ -66,6 +70,7 @@ nav {
position: relative;
padding-left: 0.75rem;
border-left: 1px;
/*border-style: dotted !important;*/
}
}
}
@@ -237,7 +242,6 @@ fieldset {
}
}
.chart > legend,
#chart > fieldset {
text-transform: lowercase;
flex-shrink: 0;
@@ -257,97 +261,251 @@ fieldset {
flex-direction: column;
min-height: 0;
flex: 1;
margin-top: 2rem;
margin-bottom: 1rem;
> legend {
gap: 1.5rem;
legend {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: lowercase;
pointer-events: none;
&:empty {
display: none;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--main-padding);
z-index: 1;
pointer-events: none;
}
&::before {
left: 0;
background-image: linear-gradient(
to left,
transparent,
var(--background-color)
);
}
&::after {
right: 0;
background-image: linear-gradient(
to right,
transparent,
var(--background-color)
);
}
> div {
flex: 0;
height: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
overflow-x: auto;
scrollbar-width: thin;
padding: 0 var(--main-padding);
padding-top: 0.25rem;
padding-bottom: 0.75rem;
pointer-events: auto;
> label {
margin: -0.375rem 0;
color: var(--color);
> span {
display: flex !important;
> div:has(> select) {
> select {
width: auto;
background: none;
}
&: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;
}
}
small {
flex-shrink: 0;
}
}
> a {
padding-left: 0.375rem;
padding-right: 0.375rem;
margin-left: -0.375rem;
margin-right: -0.375rem;
margin-top: 0.1rem;
> div:last-child {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
> div:last-child > div {
flex: 0;
height: 100%;
display: flex;
align-items: center;
> 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-left: 0.375rem;
padding-right: 0.375rem;
margin-left: -0.375rem;
margin-right: -0.375rem;
margin-top: 0.1rem;
}
}
}
}
.lightweight-chart {
> div {
min-height: 0;
height: 100%;
margin-right: var(--negative-main-padding);
margin-left: var(--negative-main-padding);
margin-top: 0.25rem;
margin-bottom: 0.25rem;
fieldset {
padding: 0.5rem;
z-index: 10;
div:has(> select) {
display: flex;
flex-shrink: 0;
gap: 0.375rem;
}
table > tr:first-child {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--main-padding);
background-image: linear-gradient(
to bottom,
var(--background-color),
transparent
);
z-index: 10;
pointer-events: none;
}
}
table > tr:last-child {
position: relative;
> td {
border-top: 1px;
}
}
.scale-selector {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: flex;
flex-direction: column;
pointer-events: none;
&[data-position="nw"] {
&::before {
content: "";
width: 100%;
height: 2rem;
background-image: linear-gradient(
to bottom,
transparent,
var(--background-color)
);
}
> div:has(label) {
display: flex;
font-size: var(--font-size-xs);
gap: 0.25rem;
background-color: var(--background-color);
align-content: center;
align-items: center;
text-transform: uppercase;
padding-left: 0.625rem;
padding-top: 0.125rem;
padding-bottom: 0.25rem;
label {
margin: -0.25rem;
padding: 0.25rem;
}
}
> fieldset {
pointer-events: auto;
background-color: var(--background-color);
width: 100%;
justify-content: center;
padding-bottom: 0.25rem;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
}
}
.index-selector {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
pointer-events: auto;
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
> div {
background-color: var(--background-color);
padding-left: var(--main-padding);
top: 0;
left: 0;
padding-right: 0.25rem;
height: 100%;
margin-top: 1px;
display: flex;
align-items: center;
> select {
width: auto;
background: none;
}
}
&[data-position="ne"] {
top: 0;
right: 0;
&::after {
content: "";
height: 100%;
margin-top: 1px;
width: var(--main-padding);
background-image: linear-gradient(
to right,
var(--background-color),
transparent
);
}
&[data-position="se"] {
bottom: 0;
right: 0;
}
&[data-position="sw"] {
padding-left: var(--main-padding);
bottom: 0;
left: 0;
}
gap: 0;
}
button.capture {
@@ -360,38 +518,4 @@ fieldset {
color: var(--off-color);
}
}
> .panes {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
> .pane {
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;
}
}
> .shadow-bottom {
bottom: 1.75rem;
width: 80px;
left: auto;
}
}
}