Work around hover state being applied to buttons in inputbar on mobile

This commit is contained in:
Alice Jenkinson 2017-03-18 17:31:01 +13:00
parent 8989695af6
commit 56fbdb4250
5 changed files with 34 additions and 10 deletions

View file

@ -335,13 +335,19 @@ input[type=text]:-moz-placeholder, input[type=password]:-moz-placeholder { /* Fi
background: var(--base08); background: var(--base08);
} }
.btn-complete-nick:hover, .btn-complete-nick:focus, .is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
.btn-send:hover, .btn-send:focus, .is-desktop-ui .btn-send:hover, .btn-send:focus,
.btn-send-image:hover, .btn-send-image:focus { .is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
background-color: var(--base07); background-color: var(--base07);
color: var(--base01); color: var(--base01);
} }
.is-mobile-ui .btn-complete-nick:hover,
.is-mobile-ui .btn-send:hover,
.is-mobile-ui .btn-send-image:hover {
color: var(--base05);
}
#connection-infos { #connection-infos {
color: var(--base04); color: var(--base04);
} }

View file

@ -93,13 +93,19 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
} }
.btn-complete-nick:hover, .btn-complete-nick:focus, .is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
.btn-send:hover, .btn-send:focus, .is-desktop-ui .btn-send:hover, .btn-send:focus,
.btn-send-image:hover, .btn-send-image:focus { .is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
background-color: #555; background-color: #555;
color: white; color: white;
} }
.is-mobile-ui .btn-complete-nick:hover,
.is-mobile-ui .btn-send:hover,
.is-mobile-ui .btn-send-image:hover {
color: #ccc;
}
.nav-pills li:nth-child(2n) { .nav-pills li:nth-child(2n) {
background: #283244; background: #283244;
} }

View file

@ -87,13 +87,19 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
} }
.btn-complete-nick:hover, .btn-complete-nick:focus, .is-desktop-ui .btn-complete-nick:hover, .btn-complete-nick:focus,
.btn-send:hover, .btn-send:focus, .is-desktop-ui .btn-send:hover, .btn-send:focus,
.btn-send-image:hover, .btn-send-image:focus { .is-desktop-ui .btn-send-image:hover, .btn-send-image:focus {
background-color: #555; background-color: #555;
color: white; color: white;
} }
.is-mobile-ui .btn-complete-nick:hover,
.is-mobile-ui .btn-send:hover,
.is-mobile-ui .btn-send-image:hover {
color: #ccc;
}
#connection-infos { #connection-infos {
color: #aaa; color: #aaa;
} }

View file

@ -34,6 +34,12 @@ html {
color: #428BCA; color: #428BCA;
} }
.is-mobile-ui .btn-complete-nick:hover,
.is-mobile-ui .btn-send:hover,
.is-mobile-ui .btn-send-image:hover {
color: #428BCA;
}
tr.bufferline:hover { tr.bufferline:hover {
background-color: #efefef; background-color: #efefef;
} }

View file

@ -1,4 +1,4 @@
<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()" imgur-drop> <form class="form form-horizontal {{ utils.isMobileUi() ? 'is-mobile-ui' : 'is-desktop-ui' }}" id="inputform" ng-submit="sendMessage()" imgur-drop>
<div class="input-group"> <div class="input-group">
<textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()"> <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
</textarea> </textarea>