.keypoints {
|
--hover: transparent;
|
|
height: 24px;
|
display: flex;
|
background-color: var(--hover);
|
|
&__label {
|
left: 0;
|
flex: none;
|
width: var(--offset);
|
height: 24px;
|
z-index: 2;
|
align-items: center;
|
position: sticky;
|
display: flex;
|
padding: 0 8px;
|
justify-content: space-between;
|
background: linear-gradient(0deg, var(--hover), var(--hover) 100%), linear-gradient(0deg, var(--color-neutral-surface), var(--color-neutral-surface) 100%);
|
box-shadow: 1px 0 0 rgb(var(--color-neutral-shadow-raw) / 5%);
|
}
|
|
&__data {
|
display: grid;
|
text-align: right;
|
grid-auto-flow: column;
|
grid-auto-columns: minmax(24px, 1fr);
|
}
|
|
&__data-item {
|
&_faded {
|
color: var(--color-neutral-content-subtler);
|
}
|
}
|
|
&__name {
|
font-size: 14px;
|
width: min-content;
|
color: var(--color);
|
}
|
|
&__keypoints {
|
flex: 1;
|
z-index: 1;
|
height: 100%;
|
position: relative;
|
}
|
|
&__lifespan {
|
top: 50%;
|
height: 2px;
|
width: 100%;
|
z-index: 1;
|
position: absolute;
|
transform: translateY(-50%);
|
background-color: var(--lifespan-color);
|
|
&_hidden {
|
opacity: 0.3;
|
}
|
}
|
|
&_timeline &__lifespan {
|
height: 20px;
|
}
|
|
&__point {
|
top: 50%;
|
width: 9px;
|
height: 9px;
|
z-index: 2;
|
position: absolute;
|
border-radius: 2px;
|
transform: translate3d(-50%, -50%, 0) rotate(45deg);
|
background-color: var(--point-color);
|
|
&_locked {
|
display: none;
|
}
|
}
|
|
&_timeline &__point {
|
width: 3px;
|
height: 20px;
|
transform: translate3d(-100%, -50%, 0);
|
}
|
|
&_timeline &__point_last {
|
transform: translate3d(0, -50%, 0);
|
}
|
|
/** instant */
|
&_timeline &__lifespan_instant &__point {
|
width: 6px;
|
transform: translate3d(-50%, -50%, 0);
|
}
|
|
&__actions {
|
display: flex;
|
}
|
|
&:hover {
|
--hover: rgb(var(--color-neutral-shadow-raw) / calc( 8% * var(--shadow-intensity) ));
|
}
|
|
&_selected,
|
&_selected:hover {
|
--hover: rgb(var(--color-neutral-shadow-raw) / calc( 8% * var(--shadow-intensity) ));
|
}
|
}
|
|
.region-action {
|
margin: 1px;
|
margin-left: 2px;
|
height: 18px;
|
min-width: 18px;
|
cursor: pointer;
|
border-radius: 3px;
|
background: var(--color-neutral-background);
|
box-shadow: 0 1px 0 rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 15%);
|
|
svg {
|
width: 18px;
|
height: 18px;
|
}
|
|
&_danger {
|
color: var(--color-negative-content);
|
}
|
}
|
