Sengi-Windows-MacOS-Linux/src/app/components/stream/stream.component.scss

105 lines
2.3 KiB
SCSS

@import "variables";
.stream-column {
position: relative;
width: $stream-column-width;
height: calc(100%);
background-color: $column-color;
margin: 0 0 0 $stream-column-separator;
&__stream-header {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
border-bottom: 1px solid black;
& h1 {
color: whitesmoke;
font-size: 0.8em;
font-weight: normal;
margin: 0;
padding: 8px 0 0 10px;
}
}
}
.stream-toots {
height: calc(100% - 30px);
width: 320px;
overflow: auto;
&__status:not(:last-child) {
border: solid #06070b;
border-width: 0 0 1px 0;
}
}
.flexcroll {
scrollbar-face-color: #08090d;
scrollbar-shadow-color: #08090d;
scrollbar-highlight-color: #08090d;
scrollbar-3dlight-color: #08090d;
scrollbar-darkshadow-color: #08090d;
scrollbar-track-color: #08090d;
scrollbar-arrow-color: #08090d;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
// background: #08090d;
background: lighten($color-primary, 5);
// -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
.stream-overlay {
position: absolute;
z-index: 50;
width: $stream-column-width;
height: calc(100%);
background-color: rgba(#ff0000, 0.3);
// margin: 0 0 0 $stream-column-separator;
// outline: 1px red solid;
// float: left;
&__header {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
padding: 6px 10px 0 10px;
& a {
color: whitesmoke;
font-size: 0.8em;
font-weight: normal;
margin: 0;
}
}
&__title {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
border-top: 1px solid whitesmoke;
border-bottom: 1px solid whitesmoke;
padding: 3px 10px 0 10px;
}
}
.overlay-previous {
display: block;
float: left;
}
.overlay-next {
display: block;
float: right;
padding-right: 20px;
}
.overlay-close {
display: block;
float: right;
}