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

Show subdued grey for icons (and darker when hovering)

Browse Source
This commit is contained in:
JC Brand 2018-02-20 15:57:01 +01:00
parent 6b89a6c106
commit 2b935fa57b
9 changed files with 200 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
css/converse.css
View File

@ -296,52 +296,6 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
@media screen and (max-height: 450px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #578EA9;
text-shadow: none; }
#conversejs :root {
--blue: #387592;
--indigo: #6610f2;
@ -4789,11 +4743,62 @@ body.reset {
background-color: #DCF9F6; }
#conversejs ::-moz-selection {
background-color: #DCF9F6; }
#conversejs a:hover {
text-decoration: none; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
@media screen and (max-height: 450px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs a, #conversejs a:visited, #conversejs a:hover, #conversejs a:not([href]):not([tabindex]) {
text-decoration: none;
color: #578EA9;
text-shadow: none; }
#conversejs a.fa, #conversejs a:visited.fa, #conversejs a:hover.fa, #conversejs a:not([href]):not([tabindex]).fa {
color: #A8ABA1; }
#conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
color: #818479; }
#conversejs canvas {
background: #777;
border-radius: 4px; }
#conversejs .fa {
color: #A8ABA1; }
#conversejs .fa:hover {
color: #818479; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle {
@ -5773,6 +5778,9 @@ body.reset {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
color: #818479; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
@ -6018,10 +6026,10 @@ body.reset {
padding: 0.2em; }
#conversejs #converse-roster .roster-filter-form span {
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; }
width: 100%;
margin: 0.2em; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
@ -6067,6 +6075,8 @@ body.reset {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
color: #818479; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
@ -6117,12 +6127,9 @@ body.reset {
float: right;
margin: 0;
padding: 0;
color: #A8ABA1;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 16px;
width: 100%; }

113
css/inverse.css
View File

@ -296,52 +296,6 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
@media screen and (max-height: 450px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 16px;
padding: 0.25em;
min-height: 0; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #578EA9;
text-shadow: none; }
#conversejs :root {
--blue: #387592;
--indigo: #6610f2;
@ -4789,11 +4743,62 @@ body.reset {
background-color: #DCF9F6; }
#conversejs ::-moz-selection {
background-color: #DCF9F6; }
#conversejs a:hover {
text-decoration: none; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
@media screen and (max-height: 450px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 16px;
padding: 0.25em;
min-height: 0; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs a, #conversejs a:visited, #conversejs a:hover, #conversejs a:not([href]):not([tabindex]) {
text-decoration: none;
color: #578EA9;
text-shadow: none; }
#conversejs a.fa, #conversejs a:visited.fa, #conversejs a:hover.fa, #conversejs a:not([href]):not([tabindex]).fa {
color: #A8ABA1; }
#conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
color: #818479; }
#conversejs canvas {
background: #777;
border-radius: 4px; }
#conversejs .fa {
color: #A8ABA1; }
#conversejs .fa:hover {
color: #818479; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle {
@ -5844,6 +5849,9 @@ body {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
color: #818479; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
@ -6145,10 +6153,10 @@ body {
padding: 0.2em; }
#conversejs #converse-roster .roster-filter-form span {
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%; }
width: 100%;
margin: 0.2em; }
#conversejs #converse-roster .roster-filter-form .clear-roster-filter {
position: absolute;
right: 0.2em;
@ -6194,6 +6202,8 @@ body {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
color: #818479; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
@ -6244,12 +6254,9 @@ body {
float: right;
margin: 0;
padding: 0;
color: #A8ABA1;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 22px;
width: 100%; }

3
sass/_controlbox.scss
View File

@ -234,6 +234,9 @@
a:hover {
color: $dark-link-color;
}
a.fa:hover {
color: $gray-color;
}
&.unread-msgs {
.available-room,
.open-room {

75
sass/_core.scss
View File

@ -48,15 +48,84 @@ body.reset {
background-color: $highlight-color;
}
a:hover {
text-decoration: none;
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
canvas {
ul li { height: auto; }
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
textarea,
input[type=submit], input[type=button],
input[type=text], input[type=password],
button {
font-size: $font-size;
padding: 0.25em;
min-height: 0;
}
strong {
font-weight: 700;
}
ol, ul {
list-style: none;
}
li {
height: 10px;
}
ul, ol, dl {
font: inherit;
margin: 0;
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
text-decoration: none;
color: $link-color;
text-shadow: none;
&.fa {
color: $subdued-color;
&:hover {
color: $gray-color;
}
}
}
canvas {
background: $text-color;
border-radius: $chatbox-border-radius;
}
.fa {
color: $subdued-color;
}
.fa:hover {
color: $gray-color;
}
.selected {
color: $link-color !important;
}

60
sass/_normalize.scss
View File

@ -1,60 +0,0 @@
#conversejs {
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px;
}
ul li { height: auto; }
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
textarea,
input[type=submit], input[type=button],
input[type=text], input[type=password],
button {
font-size: $font-size;
padding: 0.25em;
min-height: 0;
}
strong {
font-weight: 700;
}
ol, ul {
list-style: none;
}
li {
height: 10px;
}
ul, ol, dl {
font: inherit;
margin: 0;
}
a, a:visited {
text-decoration: none;
color: $link-color;
text-shadow: none;
}
}

10
sass/_roster.scss
View File

@ -37,12 +37,12 @@
span {
padding: 0.3em;
color: #888;
cursor: pointer;
}
.roster-filter {
width: 100%;
margin: 0.2em;
}
.clear-roster-filter {
position: absolute;
@ -101,10 +101,12 @@
padding: 0 0.2em 0 0;
}
}
a:hover {
color: $dark-link-color;
}
a.fa:hover {
color: $gray-color;
}
.open-chat {
margin: 0;
@ -172,14 +174,10 @@
float: right;
margin: 0;
padding: 0;
color: $subdued-color;
width: 2em;
&:before {
font-size: $font-size;
}
&:hover {
color: $gray-color;
}
}
}
}

1
sass/converse/converse.scss
View File

@ -15,7 +15,6 @@
@import "bootstrap/scss/mixins";
@import "../fonts";
@import "../normalize";
#conversejs {
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";

1
sass/inverse/inverse.scss
View File

@ -14,7 +14,6 @@
@import "bootstrap/scss/mixins";
@import "../fonts";
@import "../normalize";
#conversejs {
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";

1
src/converse-profile.js
View File

@ -58,6 +58,7 @@
'chat_status': chat_status,
'title_change_settings': __('Change settings'),
'title_change_status': __('Click to change your chat status'),
'title_log_out': __('Log out'),
'title_your_profile': __('Your profile')
}));
},