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

138 lines
3.2 KiB
SCSS

@import "variables";
@import "commons";
@import "panel";
.stream-edition {
display: block;
width: $stream-column-width;
position: absolute;
z-index: 50;
}
.stream-column {
position: relative;
width: $stream-column-width;
height: calc(100%);
overflow: hidden;
background-color: $column-color;
margin: 0 0 0 $stream-column-separator;
&__stream-header {
position: relative;
width: $stream-column-width;
border-bottom: 1px solid #222736;
}
&__open-menu {
width: $stream-header-height - 10px;
height: $stream-header-height - 10px;
position: absolute;
top: 5px;
right: 5px;
&:hover &--icon {
color: darken(whitesmoke, 30);
}
&--icon {
color: whitesmoke; // float: left;
// position: relative;
position: absolute;
top: 4px;
left: 8px;
}
}
&__stream-selector {
display: block;
width: $stream-column-width;
height: calc(#{$stream-header-height} - 1px);
background-color: $column-header-background-color;
text-decoration: none;
color: whitesmoke;
position: relative;
&--avatar {
width: 20px;
float: left;
margin-left: 11px;
position: relative;
// left: 11px;
top: 9px;
}
&--icon {
float: left;
margin-left: 11px;
position: relative;
// left: 11px;
top: 9px;
}
&--text {
float: left;
margin-left: 9px;
}
&--title {
font-size: 0.8em;
font-weight: normal;
// float: left;
// margin-left: 10px;
// position: absolute;
position: relative;
top: 9px;
margin: 0;
// left: 35px;
&--only {
top: 13px;
}
}
&--subtitle {
color: $font-link-primary-hover;
font-size: 0.7em;
font-weight: normal;
font-style: italic;
// position: absolute;
position: relative;
top: 6px;
// top: 21px;
// top: 10px;
// left: 35px;;
// outline: 1px solid greenyellow;
display: inline-block;
white-space: nowrap;
max-width: 240px;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 5px;
}
}
}
.stream-statuses {
display: block;
height: calc(100% - #{$stream-header-height});
width: 320px;
}
// .stream-overlay {
// float: right;
// width: $stream-column-width;
// height: calc(100%);
// }
// .stream-toots {
// height: calc(100% - 30px);
// width: 320px;
// overflow: auto;
// &__status:not(:last-child) {
// border: solid #06070b;
// border-width: 0 0 1px 0;
// }
// }
// .stream-overlay {
// // position: absolute;
// float: right;
// //z-index: 100;
// width: $stream-column-width;
// height: calc(100%);
// }