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

94 lines
2.3 KiB
SCSS

@import "variables";
@import "commons";
@import "mixins";
.stream-toots {
height: calc(100%);
width: calc(100%);
overflow: auto;
position: relative;
&__load-buffer {
position: relative;
z-index: 1;
display: inline-block;
border-bottom: 1px solid var(--stream-toot-load-buffer-border);
padding: 10px;
margin: 0;
text-align: center;
width: 100%;
// border: 1px dotted greenyellow ;
transition: all .2s;
color: $status-secondary-color;
&:hover {
color: var(--stream-toot-load-buffer-color-hover);
text-decoration: none;
}
}
&__error {
padding: 20px 20px 0 20px;
color: var(--stream-toot-error);
}
&__content {
height: calc(100%);
overflow: auto;
outline: none;
:focus {
outline: none;
}
}
&__new-notification {
z-index: 1;
width: $stream-column-width;
height: 25px;
position: absolute;
top: -15px;
background: radial-gradient(ellipse at center, var(--stream-new-notification-1), var(--stream-new-notification-2), var(--stream-new-notification-3));
transition: all .5s;
opacity: 0;
&--display {
opacity: 1;
}
}
&__status:not(:last-child) {
border: solid var(--stream-toot-status-not-last-child-border);
border-width: 0 0 1px 0;
}
&__remove-cw {
z-index: 100;
position: absolute;
top: 10px;
right: 20px;
padding: 5px;
height: 45px;
&--button {
transition: all .2s;
text-decoration: none;
padding: 5px 5px;
padding: 5px 10px;
text-align: center;
border: 3px $status-secondary-color double;
border: 0;
background-color: $status-secondary-color;
// background-color: rgb(238, 238, 238);
color: var(--stream-remove-cw-color);
&:hover{
background-color: var(--stream-remove-cw-background-hover);
color: var(--stream-remove-cw-color-hover);
}
}
}
}