534 lines
9.7 KiB
SCSS
534 lines
9.7 KiB
SCSS
#sideToolbarContainer {
|
|
background-color: $chatBackgroundColor;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: width .16s ease-in-out;
|
|
width: $sidebarWidth;
|
|
z-index: $sideToolbarContainerZ;
|
|
|
|
@media (max-width: 580px) {
|
|
height: 100vh;
|
|
height: -webkit-fill-available;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.chat-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// extract header + tabs height
|
|
height: calc(100% - 119px);
|
|
}
|
|
|
|
.chat-panel-no-tabs {
|
|
// extract header height
|
|
height: calc(100% - 70px);
|
|
}
|
|
|
|
#chat-conversation-container {
|
|
// extract message input height
|
|
height: calc(100% - 68px);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#chatconversation {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
font-size: 10pt;
|
|
height: 100%;
|
|
line-height: 20px;
|
|
overflow: auto;
|
|
padding: 16px;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > :first-child {
|
|
margin-top: auto;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
|
|
a:link {
|
|
color: rgb(184, 184, 184);
|
|
}
|
|
|
|
a:visited {
|
|
color: white;
|
|
}
|
|
|
|
a:hover {
|
|
color: rgb(213, 213, 213);
|
|
}
|
|
|
|
a:active {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
#chat-recipient {
|
|
align-items: center;
|
|
background-color: $chatPrivateMessageBackgroundColor;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-weight: 100;
|
|
padding: 10px;
|
|
|
|
span {
|
|
color: white;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
div {
|
|
svg {
|
|
cursor: pointer;
|
|
fill: white;
|
|
}
|
|
}
|
|
|
|
&.lobby-chat-recipient {
|
|
background-color: $chatLobbyMessageBackgroundColor;
|
|
}
|
|
}
|
|
|
|
|
|
.chat-header {
|
|
height: 70px;
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
|
|
.jitsi-icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.chat-input-container {
|
|
padding: 0 16px 16px;
|
|
}
|
|
|
|
#chat-input {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-input {
|
|
flex: 1;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.smiley-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 38px;
|
|
width: 38px;
|
|
margin: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#chat-input .smiley-button {
|
|
@media (hover: hover) and (pointer: fine) {
|
|
&:hover {
|
|
background-color: #484A4F;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remoteuser {
|
|
color: #B8C7E0;
|
|
}
|
|
|
|
.usrmsg-form {
|
|
flex: 1;
|
|
}
|
|
|
|
#usermsg {
|
|
-ms-overflow-style: none;
|
|
border: 0px none;
|
|
border-radius:0;
|
|
box-shadow: none;
|
|
color: white;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
resize: none;
|
|
scrollbar-width: none;
|
|
width: 100%;
|
|
word-break: break-word;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#usermsg:hover {
|
|
border: 0px none;
|
|
box-shadow: none;
|
|
}
|
|
#usermsg:focus,
|
|
#usermsg:active {
|
|
border-bottom: 1px solid white;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
#nickname {
|
|
text-align: center;
|
|
color: #9d9d9d;
|
|
font-size: 16px;
|
|
margin: auto 0;
|
|
padding: 0 16px;
|
|
|
|
#nickname-title {
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
}
|
|
|
|
label[for="nickinput"] {
|
|
> div > span {
|
|
color: #B8C7E0;
|
|
}
|
|
}
|
|
input {
|
|
height: 40px;
|
|
}
|
|
|
|
label {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.enter-chat {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
height: 40px;
|
|
background: #1B67EC;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
|
|
&.disabled {
|
|
color: #AFB6BC;
|
|
background: #11336E;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-browser {
|
|
#nickname {
|
|
input {
|
|
height: 48px;
|
|
}
|
|
|
|
.enter-chat {
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
#usermsg {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.chatmessage .usermessage {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.sideToolbarContainer {
|
|
* {
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.display-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.sr-only {
|
|
border: 0 !important;
|
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
clip-path: inset(50%) !important;
|
|
height: 1px !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.chatmessage {
|
|
background-color: $chatRemoteMessageBackgroundColor;
|
|
border-radius: 0px 6px 6px 6px;
|
|
box-sizing: border-box;
|
|
color: white;
|
|
margin-top: 3px;
|
|
max-width: 100%;
|
|
position: relative;
|
|
|
|
&.localuser {
|
|
background-color: $chatLocalMessageBackgroundColor;
|
|
border-radius: 6px 0px 6px 6px;
|
|
}
|
|
|
|
.usermessage {
|
|
white-space: pre-wrap;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.error {
|
|
border-radius: 0px;
|
|
|
|
.timestamp,
|
|
.display-name {
|
|
display: none;
|
|
}
|
|
|
|
.usermessage {
|
|
color: red;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.privatemessagenotice {
|
|
font-size: 11px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.messagecontent {
|
|
margin: 8px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.timestamp {
|
|
color: #757575;
|
|
}
|
|
|
|
#smileys {
|
|
font-size: 20pt;
|
|
margin: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#smileys img {
|
|
width: 22px;
|
|
padding: 2px;
|
|
}
|
|
|
|
#smileysarea {
|
|
display: flex;
|
|
max-height: 150px;
|
|
min-height: 35px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.smiley-input {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.smileys-panel {
|
|
bottom: 100%;
|
|
box-sizing: border-box;
|
|
background-color: rgba(0, 0, 0, .6) !important;
|
|
height: auto;
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: calc(#{$sidebarWidth} - 32px);
|
|
margin-bottom: 5px;
|
|
margin-left: -5px;
|
|
|
|
/**
|
|
* CSS transitions do not apply for auto dimensions. So to produce the css
|
|
* accordion effect for showing and hiding the smiley-panel, while allowing
|
|
* for variable panel, height, use a very large max-height and animate off
|
|
* of that.
|
|
*/
|
|
transition: max-height 0.3s;
|
|
|
|
#smileysContainer {
|
|
background-color: $chatBackgroundColor;
|
|
border-top: 1px solid $chatInputSeparatorColor;
|
|
}
|
|
}
|
|
|
|
#smileysContainer .smiley {
|
|
font-size: 20pt;
|
|
}
|
|
|
|
.smileyContainer {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.smileyContainer:hover {
|
|
background-color: $newToolbarButtonToggleColor;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#usermsg::-webkit-scrollbar-track-piece {
|
|
background: #3a3a3a;
|
|
}
|
|
|
|
.chat-message-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&.local {
|
|
align-items: flex-end;
|
|
|
|
.chatmessage {
|
|
background-color: $chatLocalMessageBackgroundColor;
|
|
border-radius: 6px 0px 6px 6px;
|
|
|
|
&.privatemessage {
|
|
background-color: $chatPrivateMessageBackgroundColor;
|
|
}
|
|
&.lobbymessage {
|
|
background-color: $chatLobbyMessageBackgroundColor;
|
|
}
|
|
}
|
|
|
|
.display-name {
|
|
display: none;
|
|
}
|
|
|
|
.timestamp {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
.chatmessage {
|
|
background-color: $defaultWarningColor;
|
|
border-radius: 0px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.display-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.chatmessage-wrapper {
|
|
max-width: 100%;
|
|
|
|
.replywrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.messageactions {
|
|
align-self: stretch;
|
|
border-left: 1px solid $chatActionsSeparatorColor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
|
|
&.lobbychatmessageactions {
|
|
border-left-color: $chatLobbyActionsSeparatorColor;
|
|
}
|
|
|
|
.toolbox-icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chatmessage {
|
|
background-color: $chatRemoteMessageBackgroundColor;
|
|
border-radius: 0px 6px 6px 6px;
|
|
display: inline-block;
|
|
margin-top: 3px;
|
|
color: white;
|
|
|
|
&.privatemessage {
|
|
background-color: $chatPrivateMessageBackgroundColor;
|
|
}
|
|
&.lobbymessage {
|
|
background-color: $chatLobbyMessageBackgroundColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin-top: -5px; // Margin set by atlaskit.
|
|
|
|
&-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 16px;
|
|
width: calc(100% - 32px);
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
|
|
.jitsi-icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#chatconversation {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Make header close button more easily tappable on mobile.
|
|
*/
|
|
.mobile-browser .chat-dialog-header .jitsi-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 48px;
|
|
width: 48px;
|
|
background: #36383C;
|
|
border-radius: 3px;
|
|
}
|