Sengi-Windows-MacOS-Linux/src/app/components/floating-column/manage-account/notifications/notification/notification.component.scss

124 lines
2.2 KiB
SCSS

@import "variables";
@import "commons";
@import "mixins";
.notification {
position: relative;
}
.stream {
position: relative;
&__notification {
position: relative;
&--icon {
position: absolute;
top: 5px;
left: 43px;
text-align: center;
width: 20px;
// outline: 1px dotted greenyellow;
}
&--label {
margin: 0 10px 0 $avatar-column-space;
padding-top: 5px;
}
&:not(:last-child) {
border: solid #06070b;
border-width: 0 0 1px 0;
}
}
&__link {
color: $status-links-color;
}
&__status {
display: block;
// opacity: 0.65;
}
}
.followed {
color: $boost-color;
}
$acccount-info-left: 70px;
.follow-account {
padding: 5px;
height: 60px;
width: calc(100%);
overflow: hidden;
display: block;
position: relative;
text-decoration: none;
&__avatar {
float: left;
margin: 0 0 0 10px;
width: 45px;
height: 45px;
border-radius: 2px;
}
&__display-name {
position: absolute;
top: 7px;
left: $acccount-info-left;
color: whitesmoke;
}
&:hover &__display-name {
text-decoration: underline;
}
&__acct {
position: absolute;
top: 27px;
left: $acccount-info-left;
font-size: 13px;
color: $status-links-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - #{$acccount-info-left});
}
}
.follow_request {
width: calc(100% - #{$acccount-info-left});
margin-left: $acccount-info-left;
&__link {
display: inline-block;
width: calc(50%);
padding: 2px;
text-align: center;
color: rgb(182, 182, 182);
transition: all .2s;
// outline: 1px dotted greenyellow;
&--check {
&:hover {
color: greenyellow;
}
}
&--cross {
&:hover {
color: orangered;
}
}
}
&__icon {
text-align: center;
}
}