owncast/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
Prachurjya 7ff71985ea
Issue#2662: Make Followers Content Fit With overflow ending in ellipsis (#2678)
* Issue#2662: Make Followers Content Fit With overflow ending in ellipsis

* Prettified Code!

* Fixed Linting Issue

* Resolved line break issue

---------

Co-authored-by: prachurjya15 <prachurjya15@users.noreply.github.com>
2023-02-04 20:45:31 -08:00

53 lines
969 B
SCSS

@import '../../../../../web/styles/mixins.scss';
.follower {
border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-style: solid;
padding: 10px 10px;
border-radius: 15px;
height: 75px;
width: 250px;
font-size: 0.8rem;
color: var(--theme-color-components-text-on-light);
.name {
font-weight: 600;
font-size: 1rem;
color: var(--theme-color-components-text-on-light);
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width: calc(85%);
white-space: nowrap;
}
.account {
color: var(--theme-color-components-text-on-light);
word-break: break-all;
line-height: 1rem;
}
@include screen(mobile) {
margin: auto;
}
&:hover {
border-color: var(--theme-color-action);
}
.avatar {
height: 50px;
width: 50px;
border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-style: solid;
}
.placeholder {
width: 100%;
height: 100%;
}
}