lbry-desktop/ui/scss/component/_sticker-selector.scss
saltrafael ea9c7a4a27
[Live Chat] Break down componets for Page Layout + Add ability to Pop Out chat window + Hide chat option (#681)
* Refactor CommentBadge

* Refactor livestreamComment component

* Refactor and split livestreamComment CSS

* Refactor livestreamComments component

* Refactor and split livestreamComments CSS

* Remove never used spinner

* Refactor livestream Page

* Refactor page component

* Refactor livestreamLayout component

* Break apart livestreamComments into separate sibling components

- This helps separating LivestreamComments to deal with only the comments, and the LivestreamLayout to be used for its own Page as a Popout option, and also for a layered approach for mobile

* Create Popout Chat Page, Add Popout Chat Menu Option

* Add Hide Chat option

* sockety improvements

* Websocket changes

Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
2022-01-14 15:24:16 -05:00

95 lines
1.9 KiB
SCSS

@import '../init/breakpoints';
.stickerSelector {
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-m);
.stickerSelector__header {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--spacing-s);
margin-bottom: 0;
align-items: center;
padding: var(--spacing-xxs);
.stickerSelector__headerTitle {
padding: 0;
}
}
.navigation__wrapper {
height: unset;
border-left: 1px solid var(--color-border);
.navigation-links {
li {
.button {
padding: unset;
.button__content {
justify-content: unset;
flex-direction: unset;
width: unset;
.button__label {
font-size: var(--font-small);
margin: 0 var(--spacing-s);
}
}
}
}
}
}
}
.stickerSelector__list {
display: flex;
.stickerSelector__listBody {
overflow-y: scroll;
overflow-x: hidden;
max-height: 25vh;
padding: var(--spacing-s);
.stickerSelector__listBody-rowItems {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
overflow-x: hidden;
.button--file-action {
width: 5.5rem;
height: 6rem;
overflow: hidden;
margin: unset;
padding: var(--spacing-xxs);
.stickerItem--paid {
display: flex;
flex-direction: column;
align-items: center;
img {
margin-bottom: var(--spacing-s);
}
.superChat--light {
position: absolute;
display: inline;
bottom: 0;
}
}
img {
margin: auto;
}
@media (max-width: $breakpoint-xsmall) {
width: 3.5rem;
height: 4rem;
}
}
}
}
}