xmpp-site/resources/converse.scss

122 lines
2.9 KiB
SCSS

body.converse-embedded > main {
/* converse-embedded class injected by converse.js at runtime */
padding: 0;
}
converse-root#conversejs {
/* variables from converse */
--primary-color: $color_highlight_inactive;
--primary-color-dark: $color_highlight_active;
--link-color: $color_highlight_active;
--link-hover-color: $color_highlight;
--controlbox-pane-background-color: transparent;
--controlbox-head-color: transparent;
--chat-head-color: $color_bg_text;
--chat-textarea-background-color: transparent;
--chat-content-background-color: transparent;
--text-color: $color_font_main;
--highlight-color: $color_highlight;
--controlbox-pane-bg-hover-color: $color_bg_text;
/* custom introduced variables */
--text-info-color: darken($color_font_main, 10%);
--dialogue-background-color: $color_bg_text;
--dialogue-background: var(\--dialogue-background-color);
--dropdown-item-background-color: $color_bg_main;
--dropdown-item-background: var(\--dropdown-item-background-color);
/* override some of our other css so it doesn't mess with converse */
button::after {
display: none;
}
* {
border-radius: 0 !important; /* moar. blocky. */
}
.box-flyout {
position: relative;
}
converse-dragresize {
display: none;
}
.form-control {
background: $color_bg_text;
border-radius: 0;
}
.chatbox {
width: 100%;
.chat-body {
overflow-y: hidden;
}
converse-chat-toolbar {
background: transparentize($color_bg_text, 50%);
}
}
.message.chat-info {
color: var(\--text-info-color);
}
.message.date-separator .separator-text {
background: $color_bg_text;
color: $color_font_main;
}
.sendXMPPMessage {
background: var(\--chat-textarea-background-color);
}
converse-chat-toolbar .fa svg {
fill: var(\--text-color);
}
/* Modals, dialogues and other floating boxes */
.modal-content,
.dropdown-menu {
background: var(\--dialogue-background);
box-shadow: 0 0 2px $color_highlight;
border: 0.25rem solid transparentize($color_bg_contrast, 90%);
}
.close {
color: $color_highlight_inactive;
&:hover {
color: $color_highlight_active;
}
&:active {
color: $color_highlight;
}
}
.dropdown-item {
&:hover {
background: var(\--dropdown-item-background);
}
}
.items-list {
.list-item {
.list-item-action {
width: auto;
&::before {
padding: 0.25rem;
}
&:hover {
background: $color_bg_contrast;
color: $color_font_contrast;
}
}
}
}
}