174b257c39
This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
121 lines
3.5 KiB
SCSS
121 lines
3.5 KiB
SCSS
#conversejs {
|
|
.list-container {
|
|
text-align: left;
|
|
padding: 0.3em 0;
|
|
|
|
.list-toggle {
|
|
font-family: var(--heading-font);
|
|
font-weight: var(--list-toggle-font-weight);
|
|
display: block;
|
|
color: var(--text-color);
|
|
padding: 0 0 0.5rem 0;
|
|
&:hover {
|
|
color: var(--list-toggle-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.items-list {
|
|
text-align: left;
|
|
|
|
.list-item {
|
|
border: none;
|
|
clear: both;
|
|
color: var(--text-color);
|
|
display: block;
|
|
height: 2em;
|
|
overflow: hidden;
|
|
padding-top: 0.5em;
|
|
text-shadow: 0 1px 0 var(--text-shadow-color);
|
|
word-wrap: break-word;
|
|
|
|
.list-item-link {
|
|
color: var(--list-item-link-color);
|
|
&:hover {
|
|
color: var(--list-item-link-hover-color);
|
|
}
|
|
font-size: var(--font-size);
|
|
line-height: var(--font-size);
|
|
padding-right: 0.5em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.list-item-action {
|
|
opacity: 0;
|
|
font-size: var(--font-size-tiny);
|
|
padding: 0;
|
|
margin: 0 0 0 0.4em;
|
|
width: 1.6em;
|
|
&:before {
|
|
font-size: var(--font-size);
|
|
}
|
|
&.button-on {
|
|
color: var(--list-item-link-color);
|
|
&:hover {
|
|
color: var(--list-item-link-hover-color);
|
|
}
|
|
}
|
|
color: var(--subdued-color);
|
|
&:hover {
|
|
color: var(--list-toggle-hover-color);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
background-color: var(--list-item-open-color);
|
|
&:hover {
|
|
background-color: var(--list-item-open-hover-color) !important;
|
|
}
|
|
a {
|
|
color: white;
|
|
}
|
|
.list-item-link {
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
.list-item-action {
|
|
color: var(--list-item-action-color);
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
.fa-circle {
|
|
color: var(--list-circle-color);
|
|
}
|
|
.fa-minus-circle {
|
|
color: var(--list-minus-circle-color);
|
|
}
|
|
.fa-dot-circle {
|
|
color: var(--list-dot-circle-color);
|
|
}
|
|
.far .fa-circle,
|
|
.fa-times-circle {
|
|
color: var(--subdued-color-lighten-25-percent);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--controlbox-head-color-lighten-45-percent);
|
|
.fa, .far, .fas {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.unread-msgs {
|
|
.msgs-indicator {
|
|
border-radius: 10%;
|
|
opacity: 1;
|
|
}
|
|
.available-room,
|
|
.open-room {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|