You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
2.1 KiB
140 lines
2.1 KiB
/* some base styles for chat and messaging components */ |
|
|
|
#chat-container { |
|
position: fixed; |
|
z-index: 9; |
|
top: var(--header-height); |
|
right: 0; |
|
width: var(--right-col-width); |
|
|
|
height: calc(100vh - var(--header-height)); |
|
} |
|
|
|
#message-input-container { |
|
width: var(--right-col-width); |
|
} |
|
|
|
#messages-container { |
|
padding-bottom: 10rem; |
|
} |
|
|
|
/******************************/ |
|
/******************************/ |
|
|
|
#message-input img { |
|
display: inline; |
|
vertical-align: middle; |
|
padding: .25rem; |
|
} |
|
|
|
#message-input .emoji { |
|
width: 2.2rem; |
|
padding: .25rem; |
|
} |
|
|
|
|
|
/* If the div is empty then show the placeholder */ |
|
#message-input:empty:before{ |
|
content: attr(placeholderText); |
|
pointer-events: none; |
|
display: block; /* For Firefox */ |
|
color: rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
/* When chat is enabled (contenteditable=true) */ |
|
#message-input[contenteditable=true]:before { |
|
opacity: 1.0; |
|
} |
|
|
|
|
|
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */ |
|
#message-input:disabled, |
|
#message-input[contenteditable=false] { |
|
opacity: 0.6; |
|
} |
|
/******************************/ |
|
/******************************/ |
|
|
|
|
|
.emoji-picker__emoji { |
|
border-radius: 5px; |
|
} |
|
|
|
|
|
.message-avatar { |
|
height: 3.0em; |
|
width: 3.0em; |
|
} |
|
.message-avatar img { |
|
max-width: unset; |
|
height: 3.0em; |
|
width: 3.0em; |
|
padding: 5px; |
|
} |
|
|
|
|
|
|
|
/* MESSAGE TEXT HTML */ |
|
/* MESSAGE TEXT HTML */ |
|
/* MESSAGE TEXT HTML */ |
|
.message-text a { |
|
color: #7F9CF5; /* indigo-400 */ |
|
} |
|
.message-text a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.message-text img { |
|
display: inline; |
|
padding-left: 0 .25rem; |
|
} |
|
|
|
|
|
|
|
.message-text .emoji { |
|
width: 3rem; |
|
padding: .25rem |
|
} |
|
|
|
.message-text code { |
|
font-family: monospace; |
|
background-color:darkslategrey; |
|
padding: .25rem; |
|
} |
|
|
|
|
|
|
|
.message-text .chat-embed { |
|
width: 100%; |
|
border-radius: .25rem; |
|
} |
|
|
|
.message-text .instagram-embed { |
|
height: 24rem; |
|
} |
|
|
|
|
|
.message-text .embedded-image { |
|
width: 100%; |
|
display: block; |
|
/* height: 15rem; */ |
|
} |
|
|
|
.message-text .youtube-embed { |
|
width: calc(var(--right-col-width) - 3.5em); |
|
height: auto; |
|
} |
|
|
|
/* MESSAGE TEXT CONTENT */ |
|
/* MESSAGE TEXT CONTENT */ |
|
/* MESSAGE TEXT CONTENT */ |
|
/* MESSAGE TEXT CONTENT */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|