Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Style invite dropdown

Browse Source
This commit is contained in:
JC Brand 2017-06-18 00:42:54 +02:00
parent af0930c6f2
commit 3588daeea3
5 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/converse.css
View File

@ -2469,7 +2469,10 @@
width: calc(30% - 1em); } width: calc(30% - 1em); }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul { #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0.2em; } padding: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
padding: .5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
padding: 0.3em 0; padding: 0.3em 0;
@ -2684,7 +2687,6 @@
left: 1em; left: 1em;
width: 0; width: 0;
height: 0; height: 0;
padding: .4em;
background: white; background: white;
border: inherit; border: inherit;
border-right: 0; border-right: 0;
@ -2696,22 +2698,22 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
padding: .2em .5em;
cursor: pointer; } cursor: pointer; }
#converse-embedded-chat div.awesomplete > ul > li:hover, #converse-embedded-chat div.awesomplete > ul > li:hover,
#conversejs div.awesomplete > ul > li:hover { #conversejs div.awesomplete > ul > li:hover {
background: #b8d3e0; background: #E77051;
color: black; } color: white; }
#converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"], #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
#conversejs div.awesomplete > ul > li[aria-selected="true"] { #conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: #3d6d8f; background: #3d6d8f;
color: white; } color: white; }
#converse-embedded-chat div.awesomplete mark, #converse-embedded-chat div.awesomplete mark,
#conversejs div.awesomplete mark { #conversejs div.awesomplete mark {
background: #eaff00; } background: #FFB9A7; }
#converse-embedded-chat div.awesomplete li:hover mark, #converse-embedded-chat div.awesomplete li:hover mark,
#conversejs div.awesomplete li:hover mark { #conversejs div.awesomplete li:hover mark {
background: #b5d100; } background: #A53214;
color: white; }
#converse-embedded-chat div.awesomplete li[aria-selected="true"] mark, #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
#conversejs div.awesomplete li[aria-selected="true"] mark { #conversejs div.awesomplete li[aria-selected="true"] mark {
background: #3d6b00; background: #3d6b00;

20
css/inverse.css
View File

@ -2595,7 +2595,10 @@ body {
width: calc(30% - 1em); } width: calc(30% - 1em); }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul { #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0.2em; } padding: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
padding: .5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
padding: 0.3em 0; padding: 0.3em 0;
@ -2736,10 +2739,6 @@ body {
width: 25%; width: 25%;
width: -webkit-calc(30% - 2em); width: -webkit-calc(30% - 2em);
width: calc(30% - 2em); } width: calc(30% - 2em); }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
padding: 0.3em 0; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
height: -webkit-calc(100% - 212px); height: -webkit-calc(100% - 212px);
height: calc(100% - 212px); } height: calc(100% - 212px); }
@ -2817,7 +2816,6 @@ body {
left: 1em; left: 1em;
width: 0; width: 0;
height: 0; height: 0;
padding: .4em;
background: white; background: white;
border: inherit; border: inherit;
border-right: 0; border-right: 0;
@ -2829,22 +2827,22 @@ body {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
padding: .2em .5em;
cursor: pointer; } cursor: pointer; }
#converse-embedded-chat div.awesomplete > ul > li:hover, #converse-embedded-chat div.awesomplete > ul > li:hover,
#conversejs div.awesomplete > ul > li:hover { #conversejs div.awesomplete > ul > li:hover {
background: #b8d3e0; background: #E77051;
color: black; } color: white; }
#converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"], #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
#conversejs div.awesomplete > ul > li[aria-selected="true"] { #conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: #3d6d8f; background: #3d6d8f;
color: white; } color: white; }
#converse-embedded-chat div.awesomplete mark, #converse-embedded-chat div.awesomplete mark,
#conversejs div.awesomplete mark { #conversejs div.awesomplete mark {
background: #eaff00; } background: #FFB9A7; }
#converse-embedded-chat div.awesomplete li:hover mark, #converse-embedded-chat div.awesomplete li:hover mark,
#conversejs div.awesomplete li:hover mark { #conversejs div.awesomplete li:hover mark {
background: #b5d100; } background: #A53214;
color: white; }
#converse-embedded-chat div.awesomplete li[aria-selected="true"] mark, #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
#conversejs div.awesomplete li[aria-selected="true"] mark { #conversejs div.awesomplete li[aria-selected="true"] mark {
background: #3d6b00; background: #3d6b00;

11
sass/_awesomplete.scss
View File

@ -61,7 +61,6 @@
top: -.43em; top: -.43em;
left: 1em; left: 1em;
width: 0; height: 0; width: 0; height: 0;
padding: .4em;
background: white; background: white;
border: inherit; border: inherit;
border-right: 0; border-right: 0;
@ -74,13 +73,12 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
padding: .2em .5em;
cursor: pointer; cursor: pointer;
} }
div.awesomplete > ul > li:hover { div.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%); background: $red;
color: black; color: $inverse-link-color;
} }
div.awesomplete > ul > li[aria-selected="true"] { div.awesomplete > ul > li[aria-selected="true"] {
@ -89,11 +87,12 @@
} }
div.awesomplete mark { div.awesomplete mark {
background: hsl(65, 100%, 50%); background: $lightest-red;
} }
div.awesomplete li:hover mark { div.awesomplete li:hover mark {
background: hsl(68, 100%, 41%); background: $darkest-red;
color: $inverse-link-color;
} }
div.awesomplete li[aria-selected="true"] mark { div.awesomplete li[aria-selected="true"] mark {

5
sass/_chatrooms.scss
View File

@ -120,7 +120,10 @@
} }
.awesomplete { .awesomplete {
ul { ul {
padding: 0.2em; padding: 0;
li {
padding: .5em;
}
} }
} }
ul { ul {

8
sass/inverse/_chatrooms.scss
View File

@ -45,14 +45,6 @@
width: 25%; width: 25%;
@include calc(width, '30% - 2em'); @include calc(width, '30% - 2em');
} }
.awesomplete {
ul {
padding: 0.5em;
li {
padding: 0.3em 0;
}
}
}
ul { ul {
&.occupant-list { &.occupant-list {
@include calc(height, '100% - 212px'); @include calc(height, '100% - 212px');