Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
42e2cc6a7e
xmpp.chapril.org-conversejs/sass/_lists.scss

126 lines
3.6 KiB
SCSS
Raw Normal View History

updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
#conversejs {
.list-container {
text-align: left;
padding: 0.3em 0;
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
.list-toggle {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
font-family: var(--heading-font);
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
font-weight: var(--list-toggle-font-weight);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
display: block;
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
color: var(--list-toggle-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
padding: 0 0 0.5rem 0;
&:hover {
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
color: var(--list-toggle-hover-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
}
}
.items-list {
text-align: left;
.list-item {
border: none;
clear: both;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--text-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
overflow: hidden;
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
padding: 0.5em 0;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
text-shadow: 0 1px 0 var(--text-shadow-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
word-wrap: break-word;
CSS: Set height for list items. Updates #1367
2018-12-10 15:12:09 +01:00
height: 2.5em;
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
Fixes #1379 No longer an indication of unread messages in MUC
2018-12-16 12:29:43 +01:00
&.unread-msgs {
font-weight: bold;
}
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
.list-item-link {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
color: var(--list-item-link-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
&:hover {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
color: var(--list-item-link-hover-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
}
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
margin: auto;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
font-size: var(--font-size);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
vertical-align: baseline;
}
.list-item-badge {
opacity: 1;
border-radius: 25%;
color: white;
font-size: var(--font-size-small);
line-height: var(--font-size-small);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
}
.list-item-action {
opacity: 0;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
font-size: var(--font-size-tiny);
Tweak "Participants" header and roster action icons positioning
2019-03-27 15:13:35 +01:00
padding: 0.3em 0 0 0;
Bump distance between list item actions - Set it to the same spacing for controlbox heading buttons - Make it configurable
2018-12-10 13:04:38 +01:00
margin: 0 0 0 var(--inline-action-margin);
CSS: Reuse `list-item-action` class for "Contact Requests" actions
2018-12-10 14:10:28 +01:00
width: 2em;
Tweak "Participants" header and roster action icons positioning
2019-03-27 15:13:35 +01:00
height: 2em;
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
&:before {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
font-size: var(--font-size);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
}
&.button-on {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
color: var(--list-item-link-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
&:hover {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
color: var(--list-item-link-hover-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
}
}
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--subdued-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
&:hover {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--list-toggle-hover-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
opacity: 1;
}
}
CSS: Reuse `list-item-action` class for "Contact Requests" actions
2018-12-10 14:10:28 +01:00
.list-item-action--visible {
opacity: 1 !important;
}
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
&.open {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
background-color: var(--list-item-open-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
&:hover {
Add a dark theme inspired by Discord 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.
2018-10-27 02:16:50 +02:00
background-color: var(--list-item-open-hover-color) !important;
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
a {
color: white;
}
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
.list-item-link {
&:hover {
color: white;
}
}
.list-item-action {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--list-item-action-color);
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
&:hover {
color: white;
}
}
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
.fa-circle {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--list-circle-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
.fa-minus-circle {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--list-minus-circle-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
Update user status colors and icons fixes #1209
2018-10-07 20:17:52 +02:00
.fa-dot-circle {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--list-dot-circle-color);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
Fix more missing icons due to Fontawesome upgrade
2018-09-06 19:49:59 +02:00
.far .fa-circle,
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
.fa-times-circle {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
color: var(--subdued-color-lighten-25-percent);
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
}
&:hover {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
background-color: var(--controlbox-head-color-lighten-45-percent);
Upgrade to fontawesome 5
2018-09-04 11:39:27 +02:00
.fa, .far, .fas {
Update CSS of controlbox list items Trying to use more generic CSS selectors and to extract out common patterns.
2018-07-04 10:46:52 +02:00
opacity: 1;
updates #1069 Highlight currently open private chat in the sidebar
2018-07-03 21:26:18 +02:00
}
}
}
}
}
Reference in New Issue Copy Permalink