184 lines
8.1 KiB
SCSS
184 lines
8.1 KiB
SCSS
/*
|
|
* SPDX-FileCopyrightText: 2013-2018 JC Brand <https://github.com/conversejs/converse.js/>
|
|
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
*
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
:root {
|
|
// we add --livechat-transparent variable, so that users can customize transparent background in OBS (for example).
|
|
--livechat-transparent: rgba(0 0 0 / 0%);
|
|
}
|
|
|
|
body.converse-fullscreen,
|
|
body.converse-embedded {
|
|
--peertube-main-foreground: #000;
|
|
--peertube-main-background: #fff;
|
|
--peertube-grey-foreground: #585858;
|
|
--peertube-grey-background: #e5e5e5;
|
|
--peertube-menu-foreground: #fff;
|
|
--peertube-menu-background: #000;
|
|
--peertube-input-foreground: #000;
|
|
--peertube-input-background: #fff;
|
|
--peertube-button-foreground: #fff;
|
|
--peertube-button-background: #f2690d;
|
|
--peertube-link: #000;
|
|
--peertube-link-hover: #000;
|
|
}
|
|
|
|
.conversejs.theme-peertube,
|
|
.conversejs-bg.theme-peertube,
|
|
#conversejs-bg.theme-peertube,
|
|
body.converse-fullscreen.theme-peertube,
|
|
body.converse-embedded converse-root.theme-peertube {
|
|
--foreground: var(--peertube-main-foreground);
|
|
--background: var(--peertube-main-background);
|
|
--subdued-color: #a8aba1;
|
|
--green: #3aa569; // only in this file
|
|
--redder-orange: #e77051; // only in this file
|
|
--orange: #e7a151; // only in this file
|
|
--light-blue: #578ea9; // only in this file
|
|
--lighter-blue: #85b47b; // only in this file
|
|
--chat-status-online: var(--green);
|
|
--chat-status-busy: var(--redder-orange);
|
|
--chat-status-away: var(--orange);
|
|
--brand-heading-color: #387592; // TODO: is brand-heading-color used?
|
|
--completion-light-color: var(--peertube-button-background);
|
|
--completion-normal-color: var(--peertube-button-background);
|
|
--completion-dark-color: var(--peertube-button-background);
|
|
--link-color: var(--peertube-link);
|
|
--link-hover-color: var(--peertube-link-hover);
|
|
--link-color-lighten-10-percent: var(--peertube-main-foreground);
|
|
--global-background-color: var(--peertube-main-background);
|
|
--inverse-link-color: var(--peertube-button-foreground);
|
|
--text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
|
|
--text-color: var(--peertube-input-foreground);
|
|
--controlbox-text-color: var(--peertube-input-foreground); // Note: controlbox is not used
|
|
--text-color-lighten-15-percent: var(--peertube-input-foreground);
|
|
--message-text-color: var(--peertube-input-foreground);
|
|
--message-receipt-color: var(--green);
|
|
--save-button-color: var(--green);
|
|
--button-text-color: var(--peertube-button-foreground);
|
|
--message-avatar-width: 36px;
|
|
--message-avatar-height: 36px;
|
|
--chat-background-color: var(--peertube-main-background);
|
|
--chat-textarea-color: var(--peertube-input-foreground);
|
|
--chat-textarea-background-color: var(--peertube-input-background);
|
|
--chat-textarea-height: 60px;
|
|
--send-button-height: 27px;
|
|
--send-button-margin: 3px;
|
|
--inline-action-margin: 0.75em;
|
|
--roster-height: 194px;
|
|
--chat-correcting-color: var(--peertube-grey-background);
|
|
--chat-head-color-dark: #1e9652; // should not be used in this plugin
|
|
--chat-head-color-darker: #0e763b; // should not be used in this plugin
|
|
--chat-head-color-lighten-50-percent: #e7f7ee; // should not be used in this plugin
|
|
--chat-head-color: var(--green);
|
|
--chat-head-text-color: var(--peertube-input-foreground);
|
|
--chat-toolbar-btn-color: var(--peertube-button-background);
|
|
--chat-toolbar-btn-disabled-color: var(--peertube-grey-background);
|
|
--toolbar-btn-text-color: var(--peertube-button-foreground);
|
|
--chat-content-background-color: var(--peertube-main-background);
|
|
--chat-info-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
|
|
--highlight-color: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
|
|
--highlight-color-darker: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
|
|
--primary-color: var(--peertube-button-background);
|
|
--primary-color-dark: var(--peertube-button-background);
|
|
--secondary-color: var(--peertube-button-background);
|
|
--secondary-color-dark: var(--peertube-button-background);
|
|
--warning-color: var(--orange);
|
|
--warning-color-dark: #d2842b;
|
|
--danger-color: #d24e2b;
|
|
--danger-color-dark: #a93415; // darker red
|
|
--light-background-color: var(--peertube-main-background);
|
|
--error-color: #d24e2b;
|
|
--info-color: #1e9652;
|
|
--button-border-radius: 5px;
|
|
--chatbox-border-radius: 0;
|
|
--groupchats-header-color: var(--peertube-button-background);
|
|
--groupchats-header-color-dark: var(--peertube-button-background);
|
|
--controlbox-width: 250px;
|
|
--controlbox-head-color: var(--light-blue);
|
|
--controlbox-heading-color: #777;
|
|
--controlbox-heading-font-weight: bold;
|
|
--controlbox-heading-top-margin: 0.75em;
|
|
--controlbox-pane-background-color: #333;
|
|
--controlbox-pane-bg-hover-color: #464646;
|
|
--panel-divider-color: #333;
|
|
--chat-gutter: 0.5em;
|
|
--minimized-chats-width: 130px;
|
|
--mobile-chat-width: 100%;
|
|
--mobile-chat-height: 400px;
|
|
--normal-font: "Source Sans Pro", sans-serif;
|
|
--heading-font: "Source Sans Pro", sans-serif;
|
|
--branding-font: "Source Sans Pro", sans-serif;
|
|
--heading-display: inline;
|
|
--heading-color: #9b4d;
|
|
--chatroom-color: var(--peertube-main-foreground);
|
|
--chatroom-badge-color: var(--peertube-button-background);
|
|
--chatroom-badge-hover-color: var(--peertube-button-background);
|
|
--chatroom-correcting-color: var(--peertube-grey-background);
|
|
--chatroom-head-bg-color-dark: #d24e2b;
|
|
--chatroom-head-bg-color: var(--peertube-menu-background);
|
|
--chatroom-head-border-bottom: 1px solid var(--peertube-grey-foreground);
|
|
--chatroom-head-button-color: #999;
|
|
--chatroom-head-color: var(--peertube-menu-foreground);
|
|
--chatroom-head-description-border-left: 1px solid #ddd;
|
|
--chatroom-head-description-color: black;
|
|
--chatroom-head-description-display: inline;
|
|
--chatroom-head-description-link-color: #00b3f4;
|
|
--chatroom-head-description-padding-left: 12px;
|
|
--chatroom-head-title-font-weight: bold;
|
|
--chatroom-head-title-padding-right: 12px;
|
|
--chatroom-width: 500px;
|
|
--muc-toolbar-btn-color: var(--peertube-button-background);
|
|
--muc-toolbar-btn-disabled-color: var(--peertube-grey-background);
|
|
--headline-head-color: var(--orange);
|
|
--headline-message-color: #d2842b;
|
|
--chatbox-button-size: 14px;
|
|
--fullpage-chatbox-button-size: 24px;
|
|
--font-size-tiny: 10px;
|
|
--font-size-small: 12px;
|
|
--font-size: 14px;
|
|
--font-size-large: 16px;
|
|
--font-size-huge: 20px;
|
|
--message-font-size: var(--font-size);
|
|
--separator-text-color: var(--peertube-grey-foreground);
|
|
--chat-separator-border-bottom: 1px solid var(--peertube-grey-foreground);
|
|
--chatroom-separator-border-bottom: 1px solid #aaa;
|
|
--chatroom-message-input-border-top: 1px solid #ccc;
|
|
--chatbox-message-input-border-top: 1px solid var(--peertube-menu-background);
|
|
--line-height-small: 14px;
|
|
--line-height: 16px;
|
|
--line-height-large: 20px;
|
|
--line-height-huge: 27px;
|
|
--occupants-padding: 1em;
|
|
--occupants-background-color: var(--peertube-main-background);
|
|
--occupants-border-left: 1px solid var(--peertube-grey-foreground);
|
|
--occupants-border-bottom: 1px solid var(--peertube-grey-foreground);
|
|
--embedded-emoji-picker-height: 300px;
|
|
--avatar-border-radius: 10%;
|
|
--fullpage-chat-height: calc(var(--vh, 1vh) * 100);
|
|
--fullpage-chat-width: 100%;
|
|
--fullpage-emoji-picker-height: 300px;
|
|
--fullpage-max-chat-textarea-height: 15em;
|
|
--overlayed-chat-head-height: 55px;
|
|
--overlayed-chat-height: 450px;
|
|
--overlayed-chat-width: 300px;
|
|
--overlayed-chatbox-hover-height: 1em;
|
|
--overlayed-emoji-picker-height: 200px;
|
|
--overlayed-max-chat-textarea-height: 200px;
|
|
--overlayed-badge-color: #818479; // should not be used in this plugin
|
|
--list-toggle-color: #818479;
|
|
--list-toggle-hover-color: #585b51;
|
|
--list-toggle-font-weight: bold;
|
|
--list-item-hover-color: rgb(0 0 0 / 3.5%);
|
|
--list-item-action-color: #e3eef3;
|
|
--list-item-link-color: #f1f1f1;
|
|
--list-item-link-hover-color: #ddd;
|
|
--list-item-open-color: #444;
|
|
--list-item-open-hover-color: #444;
|
|
--list-dot-circle-color: #f6dec1;
|
|
}
|