Skip to content

C
converse.js
Commit 041f4315 authored by JC Brand's avatar JC Brand
Browse files
Options

Update style for typeahead dropdown and inviting contacts.

parent bf389156
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 65 deletions
css/converse.css
View file @ 041f4315
...@@ -692,15 +692,15 @@ ...@@ -692,15 +692,15 @@
#conversejs .pure-form select:focus, #conversejs .pure-form select:focus,
#conversejs .pure-form textarea:focus { #conversejs .pure-form textarea:focus {
outline: 0; outline: 0;
border-color: #129FEA; } border-color: #1A9707; }
#conversejs .pure-form input:not([type]):focus { #conversejs .pure-form input:not([type]):focus {
outline: 0; outline: 0;
border-color: #129FEA; } border-color: #1A9707; }
#conversejs .pure-form input[type="file"]:focus, #conversejs .pure-form input[type="file"]:focus,
#conversejs .pure-form input[type="radio"]:focus, #conversejs .pure-form input[type="radio"]:focus,
#conversejs .pure-form input[type="checkbox"]:focus { #conversejs .pure-form input[type="checkbox"]:focus {
outline: thin solid #129FEA; outline: thin solid #1A9707;
outline: 1px auto #129FEA; } outline: 1px auto #1A9707; }
#conversejs .pure-form .pure-checkbox, #conversejs .pure-form .pure-checkbox,
#conversejs .pure-form .pure-radio { #conversejs .pure-form .pure-radio {
margin: 0.5em 0; margin: 0.5em 0;
...@@ -1123,28 +1123,6 @@ ...@@ -1123,28 +1123,6 @@
#conversejs .input-button-group button, #conversejs .input-button-group button,
#conversejs .input-button-group input { #conversejs .input-button-group input {
display: table-cell; } display: table-cell; }
#conversejs .tt-highlight {
background-color: #00230F; }
#conversejs .tt-suggestion p {
color: white;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
cursor: pointer;
font-size: 11px; }
#conversejs .tt-suggestion p:hover {
background-color: #00230F; }
#conversejs .tt-suggestion p:hover .tt-highlight {
background-color: #00230F;
background: #27774A; }
#conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px;
width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
#conversejs .error { #conversejs .error {
color: red; } color: red; }
#conversejs .reg-feedback { #conversejs .reg-feedback {
...@@ -1894,6 +1872,7 @@ ...@@ -1894,6 +1872,7 @@
height: 100%; height: 100%;
min-width: 200px; } min-width: 200px; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
margin-top: 0.5em;
padding: 0.5em 0.5em 0 0.5em; } padding: 0.5em 0.5em 0 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
...@@ -1947,8 +1926,33 @@ ...@@ -1947,8 +1926,33 @@
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100px; width: 100px;
border: 1px solid #999; } border: 1px solid #999; }
#conversejs .chatroom .invited-contact.tt-input { #conversejs .chatroom .invited-contact.tt-input {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } margin: 1px;
width: 97px;
width: calc(100% - 2px);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
#conversejs .chatroom .invited-contact.tt-input:focus {
border-color: #E76F51; }
#conversejs .chatroom .invited-contact.tt-hint {
color: transparent; }
#conversejs .chatroom .tt-dropdown-menu {
margin: 0 1px 0 1px;
width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #E76F51;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion p {
color: white;
cursor: pointer;
font-size: 11px; }
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion .tt-highlight {
background-color: #D24E2B; }
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion p:hover {
background-color: #FF977C; }
#conversejs #minimized-chats { #conversejs #minimized-chats {
border-top-left-radius: 4px; border-top-left-radius: 4px;
......
sass/_chatrooms.scss
View file @ 041f4315
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
height: 100%; height: 100%;
min-width: $chat-width; min-width: $chat-width;
.chat-content { .chat-content {
margin-top: 0.5em;
padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding. padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
} }
} }
...@@ -94,13 +95,48 @@ ...@@ -94,13 +95,48 @@
.chat-textarea { .chat-textarea {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.invited-contact { .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100px; width: 100px;
border: 1px solid #999; border: 1px solid #999;
&.tt-input {
margin: 1px;
width: 97px;
width: calc(100% - 2px);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
&:focus {
border-color: $chatroom-head-color;
}
}
&.tt-hint {
color: transparent;
}
} }
.invited-contact.tt-input { .tt-dropdown-menu {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; margin: 0 1px 0 1px;
width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: $chatroom-head-color;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
.tt-suggestion {
p {
color: white;
cursor: pointer;
font-size: 11px;
}
.tt-highlight {
background-color: #D24E2B;
}
p:hover {
background-color: #FF977C;
}
}
} }
} }
} }
sass/_core.scss
View file @ 041f4315
...@@ -82,36 +82,6 @@ ...@@ -82,36 +82,6 @@
display: table-cell; display: table-cell;
} }
.tt-highlight {
background-color: #00230F;
}
.tt-suggestion {
p {
color: white;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
cursor: pointer;
font-size: 11px;
}
p:hover {
background-color: #00230F;
.tt-highlight {
background-color: #00230F;
background: #27774A;
}
}
}
.tt-dropdown-menu {
margin: 0 1px 0 1px;
width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
}
.error { .error {
color: red; color: red;
} }
...@@ -157,7 +127,6 @@ ...@@ -157,7 +127,6 @@
.activated { .activated {
display: block !important; display: block !important;
} }
.pure-button { .pure-button {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
} }
......
sass/_variables.scss
View file @ 041f4315
...@@ -20,6 +20,7 @@ $chat-textarea-height: 70px !default; ...@@ -20,6 +20,7 @@ $chat-textarea-height: 70px !default;
$message-them-color: #1A9707 !default; $message-them-color: #1A9707 !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default; $highlight-color: #DCF9F6 !default;
$controlbox-head-color: #577BDD !default; $controlbox-head-color: #577BDD !default;
......
sass/pure/_forms.scss
View file @ 041f4315
...@@ -79,7 +79,7 @@ since IE8 won't execute CSS that contains a CSS3 selector. ...@@ -79,7 +79,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form select:focus, .pure-form select:focus,
.pure-form textarea:focus { .pure-form textarea:focus {
outline: 0; outline: 0;
border-color: #129FEA; border-color: $input-focus-color;
} }
/* /*
...@@ -88,14 +88,14 @@ since IE8 won't execute CSS that contains a CSS3 selector. ...@@ -88,14 +88,14 @@ since IE8 won't execute CSS that contains a CSS3 selector.
*/ */
.pure-form input:not([type]):focus { .pure-form input:not([type]):focus {
outline: 0; outline: 0;
border-color: #129FEA; border-color: $input-focus-color;
} }
.pure-form input[type="file"]:focus, .pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus, .pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus { .pure-form input[type="checkbox"]:focus {
outline: thin solid #129FEA; outline: thin solid $input-focus-color;
outline: 1px auto #129FEA; outline: 1px auto $input-focus-color;
} }
.pure-form .pure-checkbox, .pure-form .pure-checkbox,
.pure-form .pure-radio { .pure-form .pure-radio {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7