#peertube-plugin-livechat-container { display: flex; flex-direction: column; height: 100%; // Bigger occupants sidebar when embedded near a video. .chatroom .box-flyout .chatroom-body .occupants { min-width: min(200px, 50%); } } .peertube-plugin-livechat-buttons { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-end; padding-right: 12px; // to avoid being under the window scrollbar. } .peertube-plugin-livechat-button { align-items: center; display: flex; flex-direction: row; height: 36px !important; margin: 5px !important; padding: 2px !important; svg { height: auto; // override .peertube-button-link } } .peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button { height: 18px !important; margin: 2px !important; padding: 1px !important; } [peertube-plugin-livechat-state="initializing"] { display: none; } [peertube-plugin-livechat-state="open"] .peertube-plugin-livechat-button-open { display: none; } [peertube-plugin-livechat-state="closed"] .peertube-plugin-livechat-button-close { display: none; } [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state="open"]) { .peertube-plugin-livechat-multi-button-main { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important; } .peertube-plugin-livechat-multi-button-secondary { border-radius: 0 !important; margin-right: 0 !important; margin-left: 0 !important; border-left: 1px solid currentcolor; } .peertube-plugin-livechat-multi-button-last-secondary { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: 0 !important; border-left: 1px solid currentcolor; } } #peertube-plugin-livechat-container converse-root { display: block; border: 1px solid black; min-height: max(30vh, 200px); height: 100%; converse-muc { min-height: max(30vh, 200px); } } .peertube-plugin-livechat-experimental, .peertube-plugin-livechat-warning { color: orange; } .peertube-plugin-livechat-error { color: red; } table.peertube-plugin-livechat-prosody-list-rooms { border: 1px solid black; margin: 5px 0; } table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) { background-color: #eee; } table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) { background-color: #fff; } table.peertube-plugin-livechat-prosody-list-rooms th { /* stylelint-disable-next-line custom-property-pattern */ background-color: var(--mainHoverColor); border: 1px solid black; /* stylelint-disable-next-line custom-property-pattern */ color: var(--mainBackgroundColor); padding: 4px 5px; } table.peertube-plugin-livechat-prosody-list-rooms td { border: 1px solid #555; color: black; padding: 4px 5px; } .peertube-plugin-livechat-shareurl-modal { & > * { margin-top: 10px; } .livechat-shareurl-copy { display: flex; flex-wrap: wrap; button { white-space: nowrap; } input { flex-grow: 2; width: auto !important; // must cancel the width: 100% of form-control } } .livechat-shareurl-web-options, .livechat-shareurl-xmpp-options { input[type="checkbox"], input[type="radio"] { margin-right: 20px; } label { display: block; } .livechat-shareurl-web-options-readonly { margin-left: 40px; & > * { display: block; } &.livechat-shareurl-web-options-readonly-disabled { label { color: var(--gray-dark); } } } } .livechat-shareurl-protocol { display: flex; flex-flow: row wrap; column-gap: 30px; input[type="radio"] { margin-right: 10px; } } .livechat-shareurl-tips { min-height: 60px; } } .livechat-spinner { display: flex; flex-direction: row; justify-content: center; div { width: 48px; height: 48px; margin: 20px; /* stylelint-disable-next-line custom-property-pattern */ border: 5px solid var(--greyBackgroundColor); /* stylelint-disable-next-line custom-property-pattern */ border-bottom-color: var(--mainColor); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: livechatrotating 1s linear infinite; @keyframes livechatrotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } } .peertube-plugin-livechat-error-message { /* display an error block (page not found, ...) */ display: block; font-size: 20px; padding-top: 50px; text-align: center; width: 100%; } .peertube-plugin-livechat-container { .peertube-plugin-livechat-error-message { max-width: 30vw; } }