123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322 |
- /* some base styles for chat and messaging components */
- :root {
- /* Override this in your custom CSS to change the
- opacity of the message backgrounds. */
- --message-background-alpha: 0.3;
- }
- #chat-container {
- position: fixed;
- z-index: 9;
- bottom: 0;
- right: 0;
- width: var(--right-col-width);
- height: calc(100vh - var(--header-height));
- }
- @media screen and (max-width: 729px) {
- #chat-container {
- top: var(--header-height);
- }
- }
- #message-input-container {
- width: var(--right-col-width);
- }
- #message-input-wrap {
- min-height: 2.5rem;
- max-height: 5rem;
- }
- #message-form-actions {
- right: 1rem;
- bottom: 1.88rem;
- }
- #emoji-button {
- height: 1.75rem;
- width: 1.75rem;
- }
- #message-form-warning {
- display: none;
- }
- .display-count #message-form-warning {
- display: block;
- }
- /******************************/
- /******************************/
- #message-input img {
- display: inline;
- vertical-align: middle;
- padding: 0.25rem;
- }
- #message-input .emoji {
- width: 2.2rem;
- padding: 0.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;
- }
- #message-input::selection {
- background: #d7ddf4;
- }
- /* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
- #message-input:disabled,
- #message-input[contenteditable='false'] {
- opacity: 0.6;
- }
- /******************************/
- /******************************/
- /******************************/
- /* EMOJI PICKER OVERRIDES */
- .emoji-picker__wrapper {
- margin-top: -30px !important;
- }
- .emoji-picker.owncast {
- --secondary-text-color: rgba(255, 255, 255, 0.5);
- --category-button-color: rgba(255, 255, 255, 0.5);
- --hover-color: rgba(255, 255, 255, 0.25);
- background: rgba(26, 32, 44, 1); /* tailwind bg-gray-900 */
- color: rgba(226, 232, 240, 1); /* tailwind text-gray-300 */
- border-color: black;
- font-family: inherit;
- }
- .emoji-picker h2 {
- font-family: inherit;
- }
- .emoji-picker__emoji {
- border-radius: 5px;
- }
- .emoji-picker__emojis::-webkit-scrollbar {
- background: transparent;
- border-radius: 8px;
- }
- .emoji-picker__emojis::-webkit-scrollbar-track {
- border-radius: 8px;
- background-color: black;
- box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
- }
- .emoji-picker__emojis::-webkit-scrollbar-thumb {
- background-color: var(--category-button-color);
- border-radius: 8px;
- }
- .emoji-picker__emojis {
- scrollbar-color: var(--category-button-color) black;
- }
- .emoji-picker__search {
- color: rgba(26, 32, 44, 1);
- }
- /* MESSAGE TEXT HTML */
- /* MESSAGE TEXT HTML */
- /* MESSAGE TEXT HTML */
- .message-text {
- word-break: break-word;
- }
- .message-text a {
- color: #ccd;
- transition: color .2s;
- }
- .message-text a:hover {
- text-decoration: underline;
- color: #fff;
- }
- .message-text img {
- display: inline;
- padding-left: 0 0.25rem;
- }
- .message-text .emoji {
- position: relative;
- top: -5px;
- width: 3rem;
- padding: 0.25rem;
- }
- .message-text code {
- font-family: monospace;
- background-color: darkslategrey;
- padding: 0.25rem;
- }
- .message-text .chat-embed {
- width: 100%;
- border-radius: 0.25rem;
- }
- .message-text .instagram-embed {
- height: 24rem;
- }
- .message-text .embedded-image {
- width: 100%;
- display: block;
- /* height: 15rem; */
- }
- .message-text ul li {
- list-style: disc;
- list-style-position: outside;
- margin-left: 1.5rem;
- }
- /* MESSAGE TEXT CONTENT */
- /* MESSAGE TEXT CONTENT */
- /* MESSAGE TEXT CONTENT */
- /* MESSAGE TEXT CONTENT */
- /* MODERATOR STYLES */
- /* MODERATOR STYLES */
- /* MODERATOR STYLES */
- .moderator-flag:before {
- content: '👑'; /* this can be a path to an svg */
- display: inline-block;
- margin-right: .5rem;
- vertical-align: bottom;
- }
- .moderator-actions-group {
- position: absolute;
- top: 0;
- right: 0;
- }
- .message.moderatable .moderator-actions-group {
- opacity: 0;
- }
- .message.moderatable:hover .moderator-actions-group {
- opacity: 1;
- }
- .message.moderator-menu-open .moderator-actions-group {
- opacity: 1;
- }
- .message.moderatable:focus-within .moderator-actions-group {
- opacity: 1;
- }
- .moderator-menu-button {
- padding: .15rem;
- height: 1.75rem;
- width: 1.75rem;
- border-radius: 50%;
- text-align: center;
- margin-left: .05rem;
- font-size: 1rem;
- border: 1px solid transparent;
- opacity: .5;
- }
- .moderator-menu-button:hover {
- background-color: rgba(0,0,0,.5);
- opacity: 1;
- }
- .moderator-menu-button:focus {
- border-color: white;
- opacity: 1;
- }
- .moderator-action {
- padding: .15rem;
- height: 1.5rem;
- width: 1.5rem;
- border-radius: 50%;
- text-align: center;
- margin-left: .05rem;
- font-size: 1rem;
- }
- .message button:focus,
- .message button:active {
- outline: none;
- }
- .message.moderatable:last-of-type .moderator-actions-menu,
- .moderator-actions-menu {
- position: absolute;
- bottom: 0;
- right: .5rem;
- z-index: 999;
- }
- .message.moderatable:first-of-type .moderator-actions-menu,
- .message.moderatable:nth-of-type(2) .moderator-actions-menu,
- .message.moderatable:first-of-type .moderator-more-info-container,
- .message.moderatable:nth-of-type(2) .moderator-more-info-container {
- top: 0;
- bottom: unset;
- }
- .moderator-menu-item {
- font-size: .875rem;
- position: relative;
- border: 1px solid transparent;
- }
- .moderator-menu-item:focus {
- border: 1px solid white;
- }
- .moderator-menu-item .moderator-menu-icon {
- height: 1.5rem;
- width: 1.5rem;
- font-size: 1.5em;
- vertical-align: text-bottom;
- display: inline-block;
- }
- .moderator-menu-item .menu-icon-hover {
- display: none;
- z-index: 2;
- }
- .moderator-menu-item:hover .menu-icon-base {
- display: none;
- }
- .moderator-menu-item:hover .menu-icon-hover {
- display: inline-block;
- }
- .moderator-more-info-container {
- position: absolute;
- bottom: 0;
- right: 0;
- z-index: 5;
- width: calc(var(--right-col-width) - 2rem);
- }
- .moderator-more-info-message {
- overflow-y: auto;
- max-height: 6em;
- padding: .75rem;
- }
- @media screen and (max-width: 729px) {
- .moderator-more-info-container {
- width: auto;
- }
- }
- /* MODERATOR STYLES */
- /* MODERATOR STYLES */
- /* MODERATOR STYLES */
|