46 lines
1.0 KiB
CSS
46 lines
1.0 KiB
CSS
/* ========================================================= */
|
|
/* Pattern: History Graph */
|
|
/* ========================================================= */
|
|
|
|
.sg-history-graph {
|
|
--layout-history-graph-connector-width: var(--score-marker-width);
|
|
--surface-history-graph-connector: var(--chart-marker-line);
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-history-graph__events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.sg-history-graph__event {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-history-graph__event:not(:last-child)::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
width: var(--layout-history-graph-connector-width);
|
|
height: var(--spacing-large);
|
|
background: var(--surface-history-graph-connector);
|
|
content: "";
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.sg-history-graph__card {
|
|
width: 100%;
|
|
max-width: var(--layout-object-card-min-width);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.sg-history-graph__navigation {
|
|
width: 100%;
|
|
}
|