af4160eb20
This also tries to make the autoscroll functionality a bit more consistent, where all items are always shown in the list, but items which have not yet occurred will be partially transparent until they happen. Due to that change, autoscroll behavior which previously always went all the way to the bottom of a list didn't make sense anymore, so now it scrolls to the current item.
108 lines
No EOL
1.6 KiB
CSS
108 lines
No EOL
1.6 KiB
CSS
|
|
|
|
$offset: 10px;
|
|
|
|
.timeCell {
|
|
border-left: solid thin rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.headers {
|
|
box-shadow: 0 1px 2px 0 $gray-light;
|
|
background-color: $gray-lightest;
|
|
color: $gray-medium;
|
|
font-size: 12px;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0 $offset;
|
|
}
|
|
.infoHeaders {
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
& .headerCell {
|
|
padding: 4px 2px;
|
|
}
|
|
}
|
|
.waterfallHeaders {
|
|
display: flex;
|
|
flex: 1;
|
|
& .timeCell {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 4px 0;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
/* TODO hide the scrollbar track */
|
|
&::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
scrollbar-width: thin;
|
|
font-size: 12px;
|
|
font-family: 'Menlo', 'monaco', 'consolas', monospace;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
padding: 0 $offset;
|
|
/*align-items: center;
|
|
cursor: pointer;
|
|
*/
|
|
/* &:nth-child(even) {
|
|
background-color: $gray-lightest;
|
|
} */
|
|
/* & > div:first-child {
|
|
padding-left: 5px;
|
|
}*/
|
|
}
|
|
.cell {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding: 0 2px;
|
|
}
|
|
.hoverable {
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: $active-blue;
|
|
transition: all 0.2s;
|
|
color: $gray-dark;
|
|
}
|
|
}
|
|
.timeBarWrapper{
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timePart {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
/*left:0;*/
|
|
right: 0;
|
|
display: flex;
|
|
margin: 0 $offset;
|
|
& .timeCell {
|
|
height: 100%;
|
|
flex: 1;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
& .refLine {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 1px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.activeRow {
|
|
background-color: rgba(54, 108, 217, 0.1);
|
|
}
|
|
|
|
.inactiveRow {
|
|
opacity: 0.5;
|
|
} |