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

127 lines
3.2 KiB
SCSS
Raw Normal View History

2018-09-19 07:03:07 +02:00
@import "variables";
2018-09-21 04:51:18 +02:00
.reblog {
position: relative;
margin: 5px 0 0 10px;
font-size: 12px;
color: $status-secondary-color;
&__profile-link {
2018-09-27 06:50:42 +02:00
color: $status-secondary-color; // margin: 7px 0 0 70px;
2018-09-21 04:51:18 +02:00
// display: block;
2018-09-27 06:50:42 +02:00
text-decoration: none; // overflow: hidden;
2018-09-21 04:51:18 +02:00
&:hover {
color: lighten($status-secondary-color, 20);
}
}
2018-09-27 06:50:42 +02:00
&__avatar {
2018-09-21 04:51:18 +02:00
position: absolute;
top: 50px;
2018-09-27 06:50:42 +02:00
left: 20px;
2018-09-21 04:51:18 +02:00
width: 30px;
height: 30px;
border-radius: 2px;
z-index: 10;
}
}
2018-09-19 07:03:07 +02:00
.status {
margin: 0;
padding: 0;
width: calc(100%);
min-height: 70px;
overflow: hidden;
2018-09-19 07:03:07 +02:00
position: relative;
&__avatar {
2018-09-19 07:03:07 +02:00
position: absolute;
top: 10px;
left: 10px; // margin: 10px 0 0 10px;
/* margin: 0; */
width: 50px;
2018-09-19 07:03:07 +02:00
height: 50px; // float: left;
border-radius: 2px;
2018-09-27 06:50:42 +02:00
&--boosted {
2018-09-21 04:51:18 +02:00
position: absolute;
top: 10px;
2018-09-27 06:50:42 +02:00
left: 10px;
2018-09-21 04:51:18 +02:00
width: 40px;
height: 40px;
border-radius: 2px;
2018-09-27 06:50:42 +02:00
}
}
&__automation-data {
position: absolute;
top: 65px;
left: 10px;
width: 50px;
cursor: default;
&--label {
text-transform: uppercase;
text-align: center;
font-size: 7px;
margin-bottom: 3px; // color: #000;
border-radius: 2px; //border: 1px solid greenyellow;
padding-top: 1px;
}
&--bot {
background-color: rgb(0, 225, 255);
background-color: rgb(0, 159, 180);
background-color: rgb(0, 114, 129);
}
&--xpost {
background-color: rgb(255, 153, 0);
background-color: rgb(189, 113, 0);
background-color: rgb(156, 94, 0);
}
}
2018-09-21 04:51:18 +02:00
&__name {
2018-09-21 03:52:04 +02:00
display: inline-block;
width: calc(100% - 40px);
white-space: nowrap;
2018-09-21 04:51:18 +02:00
overflow: hidden; // border: 1px dotted greenyellow;
2018-09-21 03:52:04 +02:00
&--displayname {
display: inline-block;
color: $status-primary-color;
}
&--username {
display: inline-block;
2018-09-21 04:51:18 +02:00
margin-left: 5px; // position: relative;
2018-09-21 03:52:04 +02:00
// top: 1px;
}
}
&__profile-link {
2018-09-19 07:03:07 +02:00
color: $status-secondary-color;
2018-09-27 06:50:42 +02:00
margin: 7px 0 0 $avatar-column-space;
display: block;
2018-09-19 07:03:07 +02:00
text-decoration: none;
overflow: hidden;
2018-09-21 04:51:18 +02:00
&:hover {
color: lighten($status-secondary-color, 20);
}
}
&__content {
/*width: calc(100% - 50px);*/
2018-09-27 06:50:42 +02:00
word-wrap: break-word;
margin: 0 10px 0 $avatar-column-space;
display: block;
} // &__content p {
// margin: 0 !important;
// font-size: 0.85em;
// }
&__created-at {
2018-09-19 07:03:07 +02:00
position: absolute;
2018-09-21 03:52:04 +02:00
top: 7px;
right: 5px;
&--link {
color: $status-secondary-color;
text-decoration: none;
&:hover {
color: lighten($status-secondary-color, 20);
}
}
2018-09-19 07:03:07 +02:00
}
}
2018-09-27 06:50:42 +02:00
.attachments {
display: block; // width: calc(100% - 80px);
margin: 10px 10px 0 $avatar-column-space;
}