Trying better UI for the slow mode info box.

This commit is contained in:
John Livingston 2024-02-22 16:05:12 +01:00
parent 3a9c17fba8
commit 26846b3eda
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 6 additions and 4 deletions

View File

@ -17,8 +17,8 @@
.chatbox {
// Slow mode info box
livechat-slow-mode {
border-top: var(--chatroom-message-input-border-top);
.livechat-slow-mode-info-box {
border: 1px dashed var(--peertube-menu-background);
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
@ -29,6 +29,7 @@
}
converse-chat-toolbar {
border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
}

View File

@ -51,7 +51,7 @@ class SlowMode extends CustomElement {
if (this.hideInfoBox) {
return html``
}
return html`
return html`<div class="livechat-slow-mode-info-box">
<converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
${__(
'Slow mode is enabled, users can send a message every %1$s seconds.',
@ -59,7 +59,8 @@ class SlowMode extends CustomElement {
)}
<i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</i>`
</i>
</div>`
}
closeSlowModeInfoBox (ev) {