bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/chat/styles.scss

116 lines
2.4 KiB
SCSS
Raw Normal View History

@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/variables/_all";
2016-06-02 00:33:19 +08:00
2019-04-04 23:29:46 +08:00
:root {
--toast-content-width: 98%;
--toast-font-size: 80%;
--toast-content-margin-sm: .4rem;
--toast-content-margin-md: 1.4rem;
}
2019-04-04 23:29:46 +08:00
@mixin lineClamp($lineHeight: 1em, $lineCount: 1) {
position: relative;
2019-04-04 23:29:46 +08:00
white-space: nowrap;
2018-06-14 04:18:16 +08:00
overflow: hidden;
2019-04-04 23:29:46 +08:00
text-overflow: ellipsis;
line-height: $lineHeight;
max-height: calc(#{"$lineHeight * $lineCount"});
}
2016-06-02 00:33:19 +08:00
.chat {
2019-04-04 23:29:46 +08:00
background-color: var(--color-white);
padding:
var(--md-padding-x)
var(--md-padding-y)
var(--md-padding-x)
var(--md-padding-x);
2016-06-02 00:33:19 +08:00
display: flex;
flex-grow: 1;
flex-direction: column;
2017-03-17 06:39:34 +08:00
justify-content: space-around;
overflow: hidden;
height: 100vh;
transform: translateZ(0);
2016-06-02 00:33:19 +08:00
}
.header {
position: relative;
top: var(--poll-header-offset);
2017-03-17 06:39:34 +08:00
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
2016-06-02 00:33:19 +08:00
}
2017-08-05 01:58:55 +08:00
.title {
@extend %text-elipsis;
flex: 1;
2018-10-26 02:03:25 +08:00
& > button, button:hover {
2019-04-04 23:29:46 +08:00
max-width: var(--toast-content-width);
}
}
2018-10-16 22:33:42 +08:00
.hideBtn {
position: relative;
background-color: var(--color-white);
2018-10-16 22:33:42 +08:00
display: block;
margin: var(--border-size-large);
margin-bottom: var(--border-size);
padding-left: 0;
padding-right: inherit;
[dir="rtl"] & {
padding-left: inherit;
padding-right: 0;
}
2018-10-16 22:33:42 +08:00
> i {
color: var(--color-gray-dark);
font-size: smaller;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
2018-10-16 22:33:42 +08:00
}
&:hover {
background-color: var(--color-white);
2018-10-16 22:33:42 +08:00
}
}
.link {
text-decoration: none;
2018-07-06 20:05:56 +08:00
background-color: inherit;
}
.pushMessageContent {
2019-04-04 23:29:46 +08:00
margin-top: var(--toast-content-margin-md);
margin-bottom: var(--toast-content-margin-sm);
margin-left: var(--toast-content-margin-sm);
margin-right: var(--toast-content-margin-sm);
2018-07-06 20:05:56 +08:00
background-color: inherit;
2019-04-04 23:29:46 +08:00
width: var(--toast-content-width);
}
.userNameMessage {
margin: 0;
2019-04-04 23:29:46 +08:00
font-size: var(--toast-font-size);
color: var(--color-gray-dark);
font-weight: bold;
2018-07-06 20:05:56 +08:00
background-color: inherit;
@include lineClamp(1em, 1);
}
.contentMessage {
2019-04-04 23:29:46 +08:00
margin-top: var(--border-radius);
font-size: var(--toast-font-size);
2018-07-06 20:05:56 +08:00
background-color: inherit;
@include lineClamp(var(--font-size-small), 10);
}