src/app/lore/component/timeline/timeline.component.scss
@import '~@angular/material/theming';
:host {
// background-color: rgba(mat-color($back), 0.7);
background-image: linear-gradient(
rgba(0, 0, 0, 0.35),
rgba(10, 10, 10, 0.1),
rgba(92, 92, 92, 0.05),
rgba(92, 92, 92, 0.05),
rgba(170, 170, 170, 0.025)
);
height: 200px;
position: fixed;
bottom: 0;
overflow: hidden; // Hides the blocks and the cursor when the sidebar is expanded
z-index: -10;
.name {
display: inline;
}
.ruler {
// background-color: rgba(0, 0, 0, 0.05);
display: flex;
width: 100%;
height: 20%;
.header {
width: 6rem;
text-align: center;
align-self: center;
height: 100%;
}
.divisorContainer {
width: 100%;
height: 100%;
div {
display: inline-table;
position: absolute;
}
.divisor {
width: 2px;
// box-shadow: 0 0 3px #0000008a;
margin: 0;
height: 20%;
align-self: center;
transform: translateX(0);
opacity: 1;
.subDivisor {
width: 1px;
height: 75%;
}
}
}
}
.channelsContainer {
overflow: hidden;
height: 80%;
}
.channel {
height: 25%;
font-size: 3rem;
padding-left: 2rem;
line-height: 80%;
overflow: hidden;
span {
font-size: 1.6rem;
}
}
::ng-deep {
.ng-scroll-view {
overflow: hidden !important;
}
}
}